快捷導(dǎo)航

Vue?圖片監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能(實(shí)現(xiàn)思路)

更新時(shí)間：2023年03月31日 08:27:24 作者：奶糖?肥晨

其實(shí)想要實(shí)現(xiàn)功能很簡(jiǎn)單，就是在一張圖片上監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)的事件，然后根據(jù)上滾還是下滾實(shí)現(xiàn)圖片的縮放，這篇文章主要介紹了Vue?實(shí)現(xiàn)圖片監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能,需要的朋友可以參考下

前言

其實(shí)想要實(shí)現(xiàn)功能很簡(jiǎn)單，就是在一張圖片上監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)的事件，然后根據(jù)上滾還是下滾實(shí)現(xiàn)圖片的縮放。

效果：

在這里插入圖片描述

注：該配圖使用《漫畫(huà)|有趣的了解一下賦值、深淺拷貝》文章圖片，不存在侵權(quán)問(wèn)題。

實(shí)現(xiàn)思路

在js中，onmousewheel是鼠標(biāo)滑輪滾動(dòng)事件，可以通過(guò)這個(gè)事件觸發(fā)來(lái)改變圖片的大小，實(shí)現(xiàn)圖片放大縮小功能。但是我們這里是vue所以使用的是：mousewheel。@mousewheel來(lái)監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)。

<div id="productDrawing">
    <div class="alert">溫馨提示：查看圖紙時(shí)滾動(dòng)鼠標(biāo)可以放大縮小</div>
    <div class="productDrawing_Img" @mousewheel="handerPictu">
      <img
        id="oImg"
        src="../images/1.png"
        alt=""
        :style="{ width: imgWidth, height: imgHeight }"
      />
    </div>
  </div>

然后就可以在里面編寫(xiě)自己的業(yè)務(wù)邏輯了。

  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("鼠標(biāo)向下滾動(dòng)，圖片縮小");
        this.imgWidth = `${this.imgWidth - 10}px`;
        this.imgHeight = `${this.imgHeight - 10}px`;
      } else {
        console.log("鼠標(biāo)向上滾動(dòng)，圖片放大");
        this.imgWidth = `${this.imgWidth + 10}px`;
        this.imgHeight = `${this.imgHeight + 10}px`;
      }
      //   this.imgWidth = `${this.imgWidth}px`;
      console.log(this.imgWidth, this.imgHeight, "hou");
    },
  },

當(dāng)鼠標(biāo)在這個(gè)圖片滾動(dòng)滑輪的時(shí)候就會(huì)被這個(gè)時(shí)間監(jiān)聽(tīng)到，然后就可以寫(xiě)自己的邏輯代碼了。
單純的使圖片縮小放大還不至于使用防抖和節(jié)流啥的，但是如果需要請(qǐng)求后臺(tái)記得做好防抖。

全頁(yè)面代碼：

可作為組件使用：

<template>
  <div id="productDrawing">
    <div class="alert">溫馨提示：查看圖紙時(shí)滾動(dòng)鼠標(biāo)可以放大縮小</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("鼠標(biāo)向下滾動(dòng)，圖片縮小");
        this.imgWidth = `${this.imgWidth - 10}px`;
        this.imgHeight = `${this.imgHeight - 10}px`;
      } else {
        console.log("鼠標(biāo)向上滾動(dòng)，圖片放大");
        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>

相關(guān)知識(shí)點(diǎn)分享

mousewheel

mousewheel鼠標(biāo)滾輪,顯而易見(jiàn)動(dòng)動(dòng)鼠標(biāo)滾輪就能觸發(fā)事件,但是用光標(biāo)拖拽滾動(dòng)條就不能觸發(fā)事件。
wheelDelta、wheelDeltaX和wheelDeltaY值
這屬性值是一個(gè)抽象值，表示輪子轉(zhuǎn)了多遠(yuǎn)。如果滾輪旋轉(zhuǎn)遠(yuǎn)離用戶，則為正，否則為負(fù)。這意味著增量值符號(hào)不同于DOM級(jí)別3事件的符號(hào)車(chē)輪。但是，這些值的數(shù)量在不同瀏覽器之間的意義并不相同。詳情見(jiàn)以下解釋。
IE和Opera (Presto)僅支持屬性和do不支持水平滾動(dòng)。
這wheelDeltaX屬性值指示沿水平軸的屬性值。當(dāng)用戶操作設(shè)備向右滾動(dòng)時(shí)，該值為負(fù)。否則，也就是說(shuō)，如果向左，則值為正。
這wheelDeltaY屬性值指示沿垂直軸的屬性值。值的符號(hào)與車(chē)輪三角洲屬性值。
有火狐鼠標(biāo)滾輪兼容問(wèn)題。

onmousewheel

onmousewheel事件：會(huì)在鼠標(biāo)滾輪滾動(dòng)的時(shí)候被觸發(fā)，對(duì)鼠標(biāo)滾輪是否滾動(dòng)進(jìn)行判斷，但是火狐瀏覽器不支持這個(gè)屬性。DOMMouseScroll可以為火狐瀏覽器綁定滾動(dòng)事件，它需要通過(guò)addEventListener函數(shù)來(lái)綁定。

event.wheelDellta：可以用來(lái)獲取鼠標(biāo)的滾動(dòng)方向，對(duì)于得到的值，只看正負(fù)，往上滾是正值，往下滾是負(fù)值?；鸷鼮g覽器不支持這個(gè)方法，需要會(huì)用event.detail來(lái)獲取滾輪的滾動(dòng)方向，向上是負(fù)值，向下是正值。

在頁(yè)面有滾動(dòng)條的時(shí)候，滾動(dòng)條會(huì)隨著鼠標(biāo)滾輪滾動(dòng)而滾動(dòng)，這是瀏覽器的默認(rèn)行為，可用return false來(lái)取消瀏覽器的默認(rèn)行為。
有火狐鼠標(biāo)滾輪兼容問(wèn)題。

參考鏈接：
https://blog.csdn.net/Fantasc/article/details/119619584

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

到此這篇關(guān)于Vue 實(shí)現(xiàn)圖片監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能的文章就介紹到這了,更多相關(guān)vue圖片縮小放大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: