電商項(xiàng)目必備技能 ===> 放大鏡

放大鏡的主要原理就是兩個(gè)同樣大小的盒子,兩張圖片,大圖是小圖的兩倍,根據(jù)鼠標(biāo)位置的移動來顯示遮罩層里面的內(nèi)容

實(shí)現(xiàn)步驟:
1.當(dāng)鼠標(biāo)進(jìn)入,顯示遮罩層
2.遮罩層要跟隨鼠標(biāo)
3.顯示放大區(qū)域

使用vueuse 工具庫中的 useMouseInElement 方法
它可以檢測到鼠標(biāo)距離左上角的距離和當(dāng)前鼠標(biāo)是否在元素內(nèi),useMouseInElement內(nèi)有三個(gè)屬性

isOutside : 檢查鼠標(biāo)是否在元素**外部** elementX : 檢測鼠標(biāo)當(dāng)前位置離元素的X軸的距離 elementY : 檢測鼠標(biāo)當(dāng)前位置離元素的Y軸的距離

得到鼠標(biāo)是否在元素內(nèi)部,可以通過v-show讓遮罩層顯示或隱藏

//聲明一個(gè)自定義計(jì)算屬性position const target = ref(null) const { isOutside, elementX, elementY } = useMouseInElement(target) const position = computed(() => {//遮罩層的大小為200*200,name中心點(diǎn)到邊角的中心點(diǎn)就是let x = elementX.value - 100 let y = elementY.value - 100//這早層不能移出盒子,做判斷if (x < 0) { x = 0 }if (x > 200) { x = 200 }if (y < 0) { y = 0 }if (y > 200) { y = 200 }return {x,y} }) <div class="layer"v-show="!isOutside" //顯示或者隱藏遮罩層 :style="{ left: position.x + 'px', top: position.y + 'px' }" //遮罩層跟隨鼠標(biāo) ></div>

利用盒子不動背景圖片動,大圖是小圖兩倍的情況下

//在大圖中加上 backgroundPosition: `-${position.x*2}px -${position.y*2}px`

就可實(shí)現(xiàn)放大鏡效果

總結(jié)

以上是生活随笔為你收集整理的电商项目必备技能=＞放大镜的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。