JS滚轮控制图片缩放大小和拖动的实例代码

　　

具体代码如下所示:

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> Document 　　& lt; style> 　　.dragAble { 　　位置:相对; 　　光标:移动; 　　} 　　.img-con { 　　位置:相对; 　　宽度:713 px; 　　身高:455 px; 　　溢出:隐藏; 　　边界:1 px固体红; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p class=" img-con”祝辞& lt; img src=" http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg "类=巴隙?祝辞& lt;/p> 　　& lt;脚本type=" text/javascript charset=皍tf - 8”比; 　　窗口。onload=function () { 　　var oImg=document.getElementsByTagName (img) [0]; 　　函数fnWheel (obj fncc) { 　　obj。onmousewheel=fn; 　　如果(obj.addEventListener) { 　　obj。addEventListener (DOMMouseScroll, fn、虚假); 　　} 　　函数fn (ev) { 　　var oEvent=ev | | window.event; 　　var=true; 　　如果(oEvent.detail) {=oEvent.detail比;0 　　其他}{=oEvent。wheelDelta & lt;0 　　} 　　如果(fncc) { 　　fncc。调用(下来,oEvent); 　　} 　　如果(oEvent.preventDefault) { 　　oEvent.preventDefault (); 　　} 　　返回错误; 　　} 　　}; 　　fnWheel (oImg函数(,oEvent) { 　　var oldWidth=this.offsetWidth; 　　var oldHeight=this.offsetHeight; 　　var oldLeft=this.offsetLeft; 　　var oldTop=this.offsetTop; 　　var scaleX=(oEvent。clientX - oldLeft)/oldWidth;//比例 　　var写入scaleY=(oEvent。clientY - oldTop)/oldHeight; 　　如果(){ 　　this.style。宽度=ffsetWidth * 0.9 +“px”; 　　this.style。身高=ffsetHeight * 0.9 +“px”; 　　其他}{ 　　this.style。宽度=ffsetWidth * 1.1 +“px”; 　　this.style。身高=ffsetHeight * 1.1 +“px”; 　　} 　　var newWidth=this.offsetWidth; 　　var newHeight=this.offsetHeight; 　　this.style。左=oldLeft - scaleX * (newWidth - oldWidth) +“px”; 　　this.style。顶级=oldTop -写入scaleY * (newHeight - oldHeight) +“px”; 　　}); 　　} 　　& lt; !//拖拽 　　var ie=document.all; 　　var nn6=文档。getElementByIdx,,! document.all; 　　var isdrag=false; 　　var y、x; 　　var oDragObj; 　　函数moveMouse (e) { 　　如果(isdrag) { 　　oDragObj.style。顶级=(nn6 & # 63;nTY + e。clientY - y: nTY +事件。clientY - y) +“px”; 　　oDragObj.style。左=(nn6 & # 63;nTX + e。clientX - x: nTX +事件。clientX - x) +“px”; 　　返回错误; 　　} 　　} 　　函数initDrag (e) { 　　var oDragHandle=nn6 & # 63;e。目标:event.srcElement; 　　var topElement=癏TML”; 　　而(oDragHandle。tagName !=topElement,,oDragHandle。className !=巴隙?{ 　　oDragHandle=nn6 & # 63;oDragHandle。parentNode: oDragHandle.parentElement; 　　} 　　如果(oDragHandle。className==巴隙?{ 　　isdrag=true; 　　oDragObj=oDragHandle; 　　nTY=方法(oDragObj.style。前+ 0); 　　y=nn6 & # 63;e。clientY: event.clientY; 　　nTX=方法(oDragObj.style。左+ 0); 　　x=nn6 & # 63;e。clientX: event.clientX; 　　文档。onmousemove=moveMouse; 　　返回错误; 　　} 　　} 　　文档。onmousedown=initDrag; 　　文档。onmouseup=新功能(“isdrag=false”); 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　 　　

<强>只缩放

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt; title> & lt;/title> 　　& lt;/head> 　　& lt; body> 　　& lt; img边界=" 0 " src=" http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg "比; 　　& lt;/body> 　　& lt;脚本语言=癹avascript”比; 　　函数rollImg (o) {/*获取当前页面的缩放比 　　若未设置放大缩放比,则为默认100%,即1,原图大小 　　*/var变焦=方法(o.style.zoom) | | 100;/*事件。wheelDelta获取滚轮滚动值并将滚动值叠加给缩放比变焦 　　wheelDelta统一为±120,其中正数表示为向上滚动,负数表示向下滚动 　　*/缩放+=event.wheelDelta/12;/*如果缩放比大于0,则将缩放比加载到页面元素*/如果(zoom> 0) o.style.zoom=缩放+‘%’;/*如果缩放比不大于0,则返回假,不执行操作*/返回错误; 　　} 　　& lt;/script> 　　& lt;/html> 　　 　　

　　

以上所述是小编给大家介绍的JS滚轮控制图片缩放大小和拖动的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

JS滚轮控制图片缩放大小和拖动的实例代码