首页 > 网络编程 > JavaScript > Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

福牛 3月 31, 2023 163 0

前言

其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。

效果：

-1

注：该配图使用《漫画|有趣的了解一下赋值、深浅拷贝》文章图片，不存在侵权问题。

实现思路

在js中，onmousewheel是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是vue所以使用的是：mousewheel。@mousewheel来监听鼠标滑轮滚动。

  1. <div id=“productDrawing”>
  2.      <div class=“alert”>温馨提示：查看图纸时滚动鼠标可以放大缩小</div>
  3.      <div class=“productDrawing_Img” @mousewheel=“handerPictu”>
  4.          <img
  5.          id=“oImg”
  6.          src=“../images/1.png”
  7.          alt=“Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)”
  8.          :style=“{ width: imgWidth, height: imgHeight }“
  9.          />
  10.      </div>
  11.      </div>

然后就可以在里面编写自己的业务逻辑了。

  1.      handerPictu(e) {
  2.          const img = document.getElementById(“oImg”);
  3.          this.imgWidth = img.offsetWidth || img.width || img.clientWidth;
  4.          this.imgHeight = img.offsetHeight || img.height || img.clientHeight;
  5.          if (e.deltaY > 0) {
  6.          console.log(“鼠标向下滚动，图片缩小”);
  7.          this.imgWidth = `${this.imgWidth – 10}px`;
  8.          this.imgHeight = `${this.imgHeight – 10}px`;
  9.          } else {
  10.          console.log(“鼠标向上滚动，图片放大”);
  11.          this.imgWidth = `${this.imgWidth + 10}px`;
  12.          this.imgHeight = `${this.imgHeight + 10}px`;
  13.          }
  14.          // this.imgWidth = `${this.imgWidth}px`;
  15.          console.log(this.imgWidth, this.imgHeight, “hou”);
  16.      },
  17.      },

当鼠标在这个图片滚动滑轮的时候就会被这个时间监听到，然后就可以写自己的逻辑代码了。
单纯的使图片缩小放大还不至于使用防抖和节流啥的，但是如果需要请求后台记得做好防抖。

全页面代码：

可作为组件使用：

  1. <template>
  2.      <div id=“productDrawing”>
  3.      <div class=“alert”>温馨提示：查看图纸时滚动鼠标可以放大缩小</div>
  4.      <div class=“productDrawing_Img” @mousewheel=“handerPictu”>
  5.          <img
  6.          id=“oImg”
  7.          src=“../images/1.png”
  8.          alt=“Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)”
  9.          :style=“{ width: imgWidth, height: imgHeight }“
  10.          />
  11.      </div>
  12.      </div>
  13. </template>
  14. <script>
  15. export default {
  16.      data() {
  17.      return {
  18.          imgWidth: “auto”,
  19.          imgHeight: “auto”,
  20.      };
  21.      },
  22.      mounted() {},
  23.      methods: {
  24.      handerPictu(e) {
  25.          const img = document.getElementById(“oImg”);
  26.          console.log(img.offsetWidth, img.width, img.clientWidth);
  27.          this.imgWidth = img.offsetWidth || img.width || img.clientWidth;
  28.          this.imgHeight = img.offsetHeight || img.height || img.clientHeight;
  29.          if (e.deltaY > 0) {
  30.          console.log(“鼠标向下滚动，图片缩小”);
  31.          this.imgWidth = `${this.imgWidth – 10}px`;
  32.          this.imgHeight = `${this.imgHeight – 10}px`;
  33.          } else {
  34.          console.log(“鼠标向上滚动，图片放大”);
  35.          this.imgWidth = `${this.imgWidth + 10}px`;
  36.          this.imgHeight = `${this.imgHeight + 10}px`;
  37.          }
  38.          // this.imgWidth = `${this.imgWidth}px`;
  39.          console.log(this.imgWidth, this.imgHeight, “hou”);
  40.      },
  41.      },
  42. };
  43. </script>
  44. <style scoped lang=“scss“>
  45. #productDrawing {
  46.      width: 580px;
  47.      height: 480px;
  48.      border: 1px solid #edf1f5;
  49.      overflow: hidden;
  50.      .alert {
  51.      height: 30px;
  52.      font–size: 12px;
  53.      line–height: 30px;
  54.      border–radius: 2px;
  55.      color: #9e7700;
  56.      text–align: center;
  57.      background: linear–gradient(90deg, #ffffff 0%, #fff7d3 50%, #fcfcfc 100%);
  58.      }
  59.      .productDrawing_Img {
  60.      width: 580px;
  61.      height: 450px;
  62.      overflow: hidden;
  63.      display: table–cell;
  64.      vertical–align: middle;
  65.      text–align: center;
  66.      img {
  67.          max–width: 100%;
  68.          max–height: 100%;
  69.      }
  70.      }
  71. }
  72. </style>

相关知识点分享

mousewheel

mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。
wheelDelta、wheelDeltaX和wheelDeltaY值
这属性值是一个抽象值，表示轮子转了多远。如果滚轮旋转远离用户，则为正，否则为负。这意味着增量值符号不同于DOM级别3事件的符号车轮。但是，这些值的数量在不同浏览器之间的意义并不相同。详情见以下解释。
IE和Opera (Presto)仅支持属性和do不支持水平滚动。
这wheelDeltaX属性值指示沿水平轴的属性值。当用户操作设备向右滚动时，该值为负。否则，也就是说，如果向左，则值为正。
这wheelDeltaY属性值指示沿垂直轴的属性值。值的符号与车轮三角洲属性值。
有火狐鼠标滚轮兼容问题。

onmousewheel

onmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。DOMMouseScroll可以为火狐浏览器绑定滚动事件，它需要通过addEventListener函数来绑定。

event.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向，向上是负值，向下是正值。

在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动而滚动，这是浏览器的默认行为，可用return false来取消浏览器的默认行为。
有火狐鼠标滚轮兼容问题。

参考链接：
https://blog.csdn.net/Fantasc/article/details/119619584

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event 

到此这篇关于Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能的文章就介绍到这了,更多相关vue图片缩小放大内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论