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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
Python yield 小结和实例
2014/04/25 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
《Python学习手册》学习总结
2018/01/17 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
2015年话务员工作总结
2015/04/29 职场文书
亲戚关系证明
2015/06/24 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python