鼠标控制图片放大缩小div带滚动条效果
ChromeHearts 2013-05-14
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>鼠标控制图片放大缩小</title>
<scripttype="text/javascript">
window.onload=function(){
vardisplay=document.getElementById('display');
var_wheelDelta=0,upcheck=-1;
addScrollListener(display,wheelHandle);
}
functionaddScrollListener(element,wheelHandle){
if(typeofelement!='object')return;
if(typeofwheelHandle!='function')return;
//监测浏览器
if(typeofarguments.callee.browser=='undefined'){
varuser=navigator.userAgent;
varb={};
b.opera=user.indexOf("Opera")>-1&&typeofwindow.opera=="object";
b.khtml=(user.indexOf("KHTML")>-1||user.indexOf("AppleWebKit")>-1||user.indexOf("Konqueror")>-1)&&!b.opera;
b.ie=user.indexOf("MSIE")>-1&&!b.opera;
b.gecko=user.indexOf("Gecko")>-1&&!b.khtml;
arguments.callee.browser=b;
}
if(element==window)
element=document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel',wheelHandle);
else
element.addEventListener(arguments.callee.browser.gecko?'DOMMouseScroll':'mousewheel',wheelHandle,false);
}
functiongetStyleValue(objname,stylename){
if(objname.currentStyle){
returnobjname.currentStyle[stylename]
}elseif(window.getComputedStyle){
stylename=stylename.replace(/([A-Z])/g,"-$1").toLowerCase();
returnwindow.getComputedStyle(objname,null).getPropertyValue(stylename);
//returnwindow.getComputedStyle(objname,null)[stylename];
}
}
functionwheelHandle(e){
if(e.wheelDelta){
//document.getElementById('display').innerHTML=(e.wheelDelta>0?'上':'下');
upcheck=e.wheelDelta>0?1:0;
//_wheelDelta+=e.wheelDelta/(-40);
}else{
//alert(e.detail);
upcheck=e.detail<0?1:0;
//_wheelDelta+=e.detail;
}
showimg();
}
functionshowimg(){
vartmpobj=document.getElementById("showimg");
varwidth=parseInt(getStyleValue(tmpobj,'width'));
varheight=parseInt(getStyleValue(tmpobj,'height'));
vari=width/height;//alert(i);
//alert(width+''+height);
/*if(_wheelDelta<0){
if(width>=0){
tmpobj.style.height=(width+_wheelDelta*10)+'px';
tmpobj.style.width=(height+_wheelDelta*10*i)+'px';
}
}else{
if(width<=1024){
tmpobj.style.height=(width-_wheelDelta*10)+'px';
tmpobj.style.width=(height-_wheelDelta*10*i)+'px';
}
}*/
if(upcheck){
if(width<=1024){
tmpobj.style.height=(height+30)+'px';
tmpobj.style.width=(width+30*i)+'px';
}
}else{
if(width>=35){
tmpobj.style.height=(height-30)+'px';
tmpobj.style.width=(width-30*i)+'px';
}
}
}
/*varscrollfunc=function(event){
vardirect=0;
if(event.wheelDelta){
alert(wheelDelta);
//direct=event.wheelDelta>0?1:-1;
}elseif(event.detail){
alert(event.detail);
//direct=event.detail<0?1:-1;
}
};
Event.observe(document,'mousewheel',scrollfunc);
Event.observe(document,'DOMMouseScroll',scrollfunc);*///firefox
</script>
<styletype="text/css">
*{padding:0;margin:0;}
img{border:none;}
#display{max-width:400px;max-height:512px;margin:30pxauto;overflow:scroll;}
</style>
</head>
<body>
<divid="display"><imgsrc="tupian.jpg"id="showimg"width="390"height="500"style="display:block;margin:auto;"/></div>
</body>
</html>
