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

·  阅读 609

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

分类:
前端