之前写一个图片预览插件的时候，遇到了鼠标滚轮滚动进行图片缩放的需求，现在来回顾一下。
思路
首先整理一下思路，要想实现这一需求都需要哪几部，首先我们肯定要阻止鼠标的默认事件，其次，给图片设置一个默认倍数，然后根据我们鼠标的缩放去调整这个倍数，OK，接下来就开干。
实践
阻止鼠标滚动的默认事件
首先我们需要给鼠标滚动添加一个事件
代码语言：javascript复制document.body.onmousewheel = this.scrollFunc小知识点，火狐浏览器下不支持onmousewheel事件，我们需要用DOMMouseScroll代替
document.body.addEventListener('DOMMouseScroll', this.scrollFunc)之后我们就需要在scrollFunc方法中阻止默认事件，并写入我们自定义的事件。
scrollFunc(e) {
e = e || window.event
e.preventDefault()
}到了这一步，阻止浏览器默认事件就完成了。
获取鼠标滚动方向
阻止了鼠标滚动的默认事件之后，我们就要开始进入正题了。获取鼠标滚动的数据进行图片缩放，其实主要就是获取鼠标滚动的方向，向上滚动就放大，向下滚动就缩小。
据搜索得知，事件参数中，代表鼠标滚轮滚动方向的参数为e.wheelDelta，我们可以打印一下
scrollFunc(e) {
// ...
console.log(e.wheelDelta)
}经实践可得，当鼠标向下滚动时候，打印参数为-120，向上滚动时候为120，至于这个120跟什么有关，为什么是120，我就不知道了，不过跟今天的目标没有关系，我们只需要根绝他的正负来获取鼠标滚动的方向就可以了。
经实践得知，火狐浏览器同样没有e.wheelDelta，相对应的参数为e.detail，并且正负和e.wheelDelta刚好相反
所以最终代码就是这样子的。
代码语言：javascript复制// 鼠标滚轮缩放
scrollFunc(e) {
e = e || window.event
// 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta相反，所以取反
e.delta = e.wheelDelta || -e.detail
e.preventDefault()
if (e.delta > 0) {
//当滑轮向上滚动时
this.scaleFunc(0.05)
}
if (e.delta < 0) {
//当滑轮向下滚动时
this.scaleFunc(-0.05)
}
},执行缩放操作
我们在上面获取鼠标滚轮滚动方向之后，会执行scaleFunc函数，并传入一个参数，当鼠标向上滚动时，传入0.05，意为放大0.05倍（实际倍数1 0.05），反之缩小0.05倍。
// 图片缩放
scaleFunc(num) {
// 这里设置了一个缩小倍数限制，最小缩小到0.2呗
if (this.imgScale <= 0.2 && num < 0) return
this.imgScale = num
}到这里就，pc端使用鼠标控制图片缩放就完成了，如果有同学感兴趣，改天我再分享一下移动端双指缩放，以上代码都摘自我的插件hevue-img-preview，感兴趣的朋友可以直接下载源代码进行阅读，插件已经适配了移动端，所以里面也有移动端双指缩放的解决方案。
