脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 滚轮控制图片缩放大小和拖动

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

 更新时间：2018年11月20日 08:37:36   作者：小角色Byme  
本文通过实例代码给大家介绍了js 滚轮控制图片缩放大小和拖动，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下

具体代码如下所示：

<!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滚轮控制图片缩放大小和拖动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • uni-app使用组件的步骤记录

    uni-app使用组件的步骤记录

    这篇文章主要给大家介绍了关于uni-app使用组件的详细步骤,文中还介绍了自定义组件的使用方法,本文通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • JS 字符串连接[性能比较]

    JS 字符串连接[性能比较]

    js字符串连接实现代码。
    2009-05-05
  • JS实现文本比较差异的示例代码

    JS实现文本比较差异的示例代码

    内部系统上线了一个发版记录发版内容的功能,维护发版记录的同事提出一个可以展示前后文本差异的优化需求, 使的每次变更前可以确认新增了哪些,或者删除了哪些内容,所以本文给大家介绍了基于JS实现文本比较差异,需要的朋友可以参考下
    2023-12-12
  • IE6兼容透明背景图片及解决方案

    IE6兼容透明背景图片及解决方案

    这篇文章给大家介绍IE6兼容透明背景图片以及在IE6中的透明图片不是透明显示的解决方案,有需要的朋友可以参考下
    2015-08-08
  • ie与ff下的event事件

    ie与ff下的event事件

    event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数的方式来模拟event，：（
    2009-09-09
  • 微信小程序rich-text富文本用法实例分析

    微信小程序rich-text富文本用法实例分析

    这篇文章主要介绍了微信小程序rich-text富文本用法,结合实例形式分析了微信小程序rich-text富文本插件的功能、用法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • 初学js插入节点appendChild insertBefore使用方法

    初学js插入节点appendChild insertBefore使用方法

    由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
    2011-07-07
  • JavaScript实现的鼠标响应颜色渐变效果完整实例

    JavaScript实现的鼠标响应颜色渐变效果完整实例

    这篇文章主要介绍了JavaScript实现的鼠标响应颜色渐变效果,涉及javascript面向对象及事件监听、响应机制相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • 30分钟快速实现小程序语音识别功能

    30分钟快速实现小程序语音识别功能

    最近需要在小程序上实现语音识别，将需要用到的功能都总结下，供大家参考。语音识别用的是科大讯飞，文中给出了详细的实现方法介绍，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • ASP中进行HTML数据及JS数据编码函数

    ASP中进行HTML数据及JS数据编码函数

    在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?
    2009-11-11

最新评论