前言
其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。
效果：
注：该配图使用《漫画|有趣的了解一下赋值、深浅拷贝》文章图片，不存在侵权问题。
实现思路
在 js 中，onmousewheel 是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是 vue 所以使用的是：mousewheel。@mousewheel 来监听鼠标滑轮滚动。
<div id="productDrawing"> <div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小</div> <div class="productDrawing_Img" @mousewheel="handerPictu"> <img id="oImg" src="../images/1.png" alt="" :style="{ width: imgWidth, height: imgHeight }" /> </div> </div>
复制代码
然后就可以在里面编写自己的业务逻辑了。
handerPictu(e) { const img = document.getElementById("oImg"); this.imgWidth = img.offsetWidth || img.width || img.clientWidth; this.imgHeight = img.offsetHeight || img.height || img.clientHeight; if (e.deltaY > 0) { console.log("鼠标向下滚动，图片缩小"); this.imgWidth = `${this.imgWidth - 10}px`; this.imgHeight = `${this.imgHeight - 10}px`; } else { console.log("鼠标向上滚动，图片放大"); this.imgWidth = `${this.imgWidth + 10}px`; this.imgHeight = `${this.imgHeight + 10}px`; } // this.imgWidth = `${this.imgWidth}px`; console.log(this.imgWidth, this.imgHeight, "hou"); }, },
复制代码
当鼠标在这个图片滚动滑轮的时候就会被这个时间监听到，然后就可以写自己的逻辑代码了。单纯的使图片缩小放大还不至于使用防抖和节流啥的，但是如果需要请求后台记得做好防抖。
全页面代码：
可作为组件使用：
<template> <div id="productDrawing"> <div class="alert">温馨提示：查看图纸时滚动鼠标可以放大缩小</div> <div class="productDrawing_Img" @mousewheel="handerPictu"> <img id="oImg" src="../images/1.png" alt="" :style="{ width: imgWidth, height: imgHeight }" /> </div> </div></template><script>export default { data() { return { imgWidth: "auto", imgHeight: "auto", }; }, mounted() {}, methods: { handerPictu(e) { const img = document.getElementById("oImg"); console.log(img.offsetWidth, img.width, img.clientWidth); this.imgWidth = img.offsetWidth || img.width || img.clientWidth; this.imgHeight = img.offsetHeight || img.height || img.clientHeight; if (e.deltaY > 0) { console.log("鼠标向下滚动，图片缩小"); this.imgWidth = `${this.imgWidth - 10}px`; this.imgHeight = `${this.imgHeight - 10}px`; } else { console.log("鼠标向上滚动，图片放大"); this.imgWidth = `${this.imgWidth + 10}px`; this.imgHeight = `${this.imgHeight + 10}px`; } // this.imgWidth = `${this.imgWidth}px`; console.log(this.imgWidth, this.imgHeight, "hou"); }, },};</script><style scoped lang="scss">#productDrawing { width: 580px; height: 480px; border: 1px solid #edf1f5; overflow: hidden; .alert { height: 30px; font-size: 12px; line-height: 30px; border-radius: 2px; color: #9e7700; text-align: center; background: linear-gradient(90deg, #ffffff 0%, #fff7d3 50%, #fcfcfc 100%); } .productDrawing_Img { width: 580px; height: 450px; overflow: hidden; display: table-cell; vertical-align: middle; text-align: center; img { max-width: 100%; max-height: 100%; } }}</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/119619584https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event
评论