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

這篇文章主要講解了“Vue圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)怎么實(shí)現(xiàn)圖片縮小放大功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)怎么實(shí)現(xiàn)圖片縮小放大功能”吧！

效果：

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

在js中，onmousewheel是鼠標(biāo)滑輪滾動(dòng)事件，可以通過這個(gè)事件觸發(fā)來改變圖片的大小，實(shí)現(xiàn)圖片放大縮小功能。但是我們這里是vue所以使用的是：mousewheel。@mousewheel來監(jiān)聽鼠標(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=""
        :
      />
    </div>
  </div>

然后就可以在里面編寫自己的業(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)聽到，然后就可以寫自己的邏輯代碼了。
單純的使圖片縮小放大還不至于使用防抖和節(jié)流啥的，但是如果需要請求后臺(tái)記得做好防抖。

全頁面代碼：

可作為組件使用：

<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=""
        :
      />
    </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)滾輪,顯而易見動(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)車輪。但是，這些值的數(shù)量在不同瀏覽器之間的意義并不相同。詳情見以下解釋。
IE和Opera (Presto)僅支持屬性和do不支持水平滾動(dòng)。
這wheelDeltaX屬性值指示沿水平軸的屬性值。當(dāng)用戶操作設(shè)備向右滾動(dòng)時(shí)，該值為負(fù)。否則，也就是說，如果向左，則值為正。
這wheelDeltaY屬性值指示沿垂直軸的屬性值。值的符號(hào)與車輪三角洲屬性值。
有火狐鼠標(biāo)滾輪兼容問題。

onmousewheel

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

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

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

感謝各位的閱讀，以上就是“Vue圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)怎么實(shí)現(xiàn)圖片縮小放大功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)怎么實(shí)現(xiàn)圖片縮小放大功能這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！