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


Posted in Javascript onNovember 20, 2018

具体代码如下所示:

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

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
vue中的适配px2rem示例代码
Nov 19 #Javascript
JS监听事件的叠加和移除功能
Nov 19 #Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 #Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 #Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 #Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php验证码生成器
2017/05/24 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python中的函数用法入门教程
2014/09/02 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Servlet的生命周期
2013/08/25 面试题
餐饮营销方案
2014/02/23 职场文书
股份合作协议书
2014/04/12 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书