前言
其實想要實現(xiàn)功能很簡單，就是在一張圖片上監(jiān)聽鼠標滑輪滾動的事件，然后根據(jù)上滾還是下滾實現(xiàn)圖片的縮放。
效果：
注：該配圖使用《漫畫|有趣的了解一下賦值、深淺拷貝》文章圖片，不存在侵權(quán)問題。
實現(xiàn)思路
在js中，onmousewheel是鼠標滑輪滾動事件，可以通過這個事件觸發(fā)來改變圖片的大小，實現(xiàn)圖片放大縮小功能。但是我們這里是vue所以使用的是：mousewheel。@mousewheel來監(jiān)聽鼠標滑輪滾動。
<div id="productDrawing">
<div class="alert">溫馨提示：查看圖紙時滾動鼠標可以放大縮小</div>
<div class="productDrawing_Img" @mousewheel="handerPictu">
<img
id="oImg"
src="../images/1.png"
alt=""
:style="{ width: imgWidth, height: imgHeight }"
/>
</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("鼠標向下滾動，圖片縮小");
this.imgWidth = `${this.imgWidth - 10}px`;
this.imgHeight = `${this.imgHeight - 10}px`;
} else {
console.log("鼠標向上滾動，圖片放大");
this.imgWidth = `${this.imgWidth + 10}px`;
this.imgHeight = `${this.imgHeight + 10}px`;
}
// this.imgWidth = `${this.imgWidth}px`;
console.log(this.imgWidth, this.imgHeight, "hou");
},
},
當鼠標在這個圖片滾動滑輪的時候就會被這個時間監(jiān)聽到，然后就可以寫自己的邏輯代碼了。
單純的使圖片縮小放大還不至于使用防抖和節(jié)流啥的，但是如果需要請求后臺記得做好防抖。
全頁面代碼：
可作為組件使用：
<template>
<div id="productDrawing">
<div class="alert">溫馨提示：查看圖紙時滾動鼠標可以放大縮小</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("鼠標向下滾動，圖片縮小");
this.imgWidth = `${this.imgWidth - 10}px`;
this.imgHeight = `${this.imgHeight - 10}px`;
} else {
console.log("鼠標向上滾動，圖片放大");
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)知識點分享
mousewheel
mousewheel鼠標滾輪,顯而易見動動鼠標滾輪就能觸發(fā)事件,但是用光標拖拽滾動條就不能觸發(fā)事件。
wheelDelta、wheelDeltaX和wheelDeltaY值
這屬性值是一個抽象值，表示輪子轉(zhuǎn)了多遠。如果滾輪旋轉(zhuǎn)遠離用戶，則為正，否則為負。這意味著增量值符號不同于DOM級別3事件的符號車輪。但是，這些值的數(shù)量在不同瀏覽器之間的意義并不相同。詳情見以下解釋。
IE和Opera (Presto)僅支持屬性和do不支持水平滾動。
這wheelDeltaX屬性值指示沿水平軸的屬性值。當用戶操作設(shè)備向右滾動時，該值為負。否則，也就是說，如果向左，則值為正。
這wheelDeltaY屬性值指示沿垂直軸的屬性值。值的符號與車輪三角洲屬性值。
有火狐鼠標滾輪兼容問題。
onmousewheel
onmousewheel事件：會在鼠標滾輪滾動的時候被觸發(fā)，對鼠標滾輪是否滾動進行判斷，但是火狐瀏覽器不支持這個屬性。DOMMouseScroll可以為火狐瀏覽器綁定滾動事件，它需要通過addEventListener函數(shù)來綁定。
event.wheelDellta：可以用來獲取鼠標的滾動方向，對于得到的值，只看正負，往上滾是正值，往下滾是負值?；鸷鼮g覽器不支持這個方法，需要會用event.detail來獲取滾輪的滾動方向，向上是負值，向下是正值。
在頁面有滾動條的時候，滾動條會隨著鼠標滾輪滾動而滾動，這是瀏覽器的默認行為，可用return false來取消瀏覽器的默認行為。
有火狐鼠標滾輪兼容問題。文章來源：http://www.zghlxwxcb.cn/news/detail-789974.html
參考鏈接：
https://blog.csdn.net/Fantasc/article/details/119619584
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event文章來源地址http://www.zghlxwxcb.cn/news/detail-789974.html
到了這里，關(guān)于Vue 實現(xiàn)圖片監(jiān)聽鼠標滑輪滾動實現(xiàn)圖片縮小放大功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
