码迷,mamicode.com
首页 > Web开发 > 详细

js 鼠标滚轮控制图片放大缩小

时间:2020-06-30 13:11:58      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:else   doc   nbsp   缩放   col   配置   opera   style   图片   

 <img :src="ImgUrl" alt="" width="100%" @mousewheel="zoomimg($event)" id="ScrollImg">

 

// 缩放图片
    zoomimg(event) {
      var delta = 0;
      if (!event) event = window.event;
      if (event.wheelDelta) {
        delta = event.wheelDelta / 120;
        if (window.opera) delta = -delta;
      } else if (event.detail) {
        delta = -event.detail / 3;
      }
      var img = document.getElementById(‘ScrollImg‘)
      if (delta > 0) {
        var width = img.width;
        img.width = width * 1.1;
      } else if (delta < 0) {
        var width = img.width;
        if (width > 400) {
          img.width = width * 0.9;
        }
      }
    },

具体放大缩小限制大家自己配置。

 

js 鼠标滚轮控制图片放大缩小

标签:else   doc   nbsp   缩放   col   配置   opera   style   图片   

原文地址:https://www.cnblogs.com/zhangyezi/p/13212789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!