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

2024-05-06 16:46:53

字体：大中小

来源：转载

供稿：网友

具体代码如下所示：

<!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){  /* 获取当前页面的缩放比    若未设置zoom缩放比，则为默认100%，即1，原图大小  */   var zoom=parseInt(o.style.zoom)||100;  /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom    wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动  */  zoom+=event.wheelDelta/12;  /* 如果缩放比大于0，则将缩放比加载到页面元素 */  if (zoom>0) o.style.zoom=zoom+'%';  /* 如果缩放比不大于0，则返回false，不执行操作 */  return false;}</script></html>

总结

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JS监听事件的叠加和移除功能

下一篇：一步步教你利用Docker设置Node.js