Vue?圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能(實(shí)現(xiàn)思路)
前言
其實(shí)想要實(shí)現(xiàn)功能很簡(jiǎn)單,就是在一張圖片上監(jiān)聽鼠標(biāo)滑輪滾動(dòng)的事件,然后根據(jù)上滾還是下滾實(shí)現(xiàn)圖片的縮放。
效果:
注:該配圖使用《漫畫|有趣的了解一下賦值、深淺拷貝》文章圖片,不存在侵權(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)聽鼠標(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>
然后就可以在里面編寫自己的業(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é)流啥的,但是如果需要請(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)滾輪,顯而易見動(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ù)。否則,也就是說(shuō),如果向左,則值為正。
這wheelDeltaY屬性值指示沿垂直軸的屬性值。值的符號(hào)與車輪三角洲屬性值。
有火狐鼠標(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/119619584https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event
到此這篇關(guān)于Vue 實(shí)現(xiàn)圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能的文章就介紹到這了,更多相關(guān)vue圖片縮小放大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了vue.js進(jìn)行數(shù)據(jù)雙向綁定操作的常見實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題
本文主要介紹了解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02vue中實(shí)現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實(shí)現(xiàn)在外部調(diào)用methods的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08解決vue.js this.$router.push無(wú)效的問(wèn)題
今天小編就為大家分享一篇解決vue.js this.$router.push無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載
本篇文章主要介紹了vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09vue3+vite加載本地js/json文件不能使用require淺析
這篇文章主要給大家介紹了關(guān)于vue3+vite加載本地js/json文件不能使用require的相關(guān)資料,require 是屬于 Webpack 的方法,在v3+vite的項(xiàng)目里面并不適用,需要的朋友可以參考下2023-07-07vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08