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

Posted 小猴子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 鼠标滚轮控制图片放大缩小相关的知识,希望对你有一定的参考价值。

 <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 鼠标滚轮控制图片放大缩小的主要内容,如果未能解决你的问题,请参考以下文章

JS控制图片放大和缩小怎么改

pc端 前端页面 js灯箱效果能放大缩小吗

javascript高手请进!关于就js控制网页图片放大缩小的问题

在网页里点开放大了一张图片后,怎么实现随鼠标滚轮放大缩小?

extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片?

LabVIEW操作鼠标滚轮放大/缩小图像