实现pc端鼠标滚轮缩放图片的步骤

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

之前写一个图片预览插件的时候，遇到了鼠标滚轮滚动进行图片缩放的需求，现在来回顾一下。

思路

首先整理一下思路，要想实现这一需求都需要哪几部，首先我们肯定要阻止鼠标的默认事件，其次，给图片设置一个默认倍数，然后根据我们鼠标的缩放去调整这个倍数，OK，接下来就开干。

实践

阻止鼠标滚动的默认事件

首先我们需要给鼠标滚动添加一个事件

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刚好相反

所以最终代码就是这样子的。

// 鼠标滚轮缩放
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，感兴趣的朋友可以直接下载源代码进行阅读，插件已经适配了移动端，所以里面也有移动端双指缩放的解决方案。