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

时间：2021-05-26

具体代码如下所示：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 713px; height: 455px; overflow: hidden; border: 1px solid red; } </style></head><body> <p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragAble" /></p> <script type="text/javascript" charset="utf-8"> window.onload = function() { var oImg = document.getElementsByTagName("img")[0]; function fnWheel(obj, fncc) { obj.onmousewheel = fn; if (obj.addEventListener) { obj.addEventListener('DOMMouseScroll', fn, false); } function fn(ev) { var oEvent = ev || window.event; var down = true; if (oEvent.detail) { down = oEvent.detail > 0 } else { down = oEvent.wheelDelta < 0 } if (fncc) { fncc.call(this, down, oEvent); } if (oEvent.preventDefault) { oEvent.preventDefault(); } return false; } }; fnWheel(oImg, function(down, 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; if (down) { this.style.width = this.offsetWidth * 0.9 + "px"; this.style.height = this.offsetHeight * 0.9 + "px"; } else { this.style.width = this.offsetWidth * 1.1 + "px"; this.style.height = this.offsetHeight * 1.1 + "px"; } var newWidth = this.offsetWidth; var newHeight = this.offsetHeight; this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px"; this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px"; }); } <!-- //拖拽 var ie = document.all; var nn6 = document.getElementByIdx && !document.all; var isdrag = false; var y, x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className == "dragAble") { isdrag = true; oDragObj = oDragHandle; nTY = parseInt(oDragObj.style.top + 0); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left + 0); x = nn6 ? e.clientX : event.clientX; document.onmousemove = moveMouse; return false; } } document.onmousedown = initDrag; document.onmouseup = new Function("isdrag=false"); </script></body></html>

只缩放

<!DOCTYPE html><html><head><title></title></head><body><img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollImg(this)"></body><script language="javascript">function rollImg(o){ var zoom=parseInt(o.style.zoom)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+'%'; return false;}</script></html>

总结

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章