電商項目必備技能 ===> 放大鏡

放大鏡的主要原理就是兩個同樣大小的盒子,兩張圖片,大圖是小圖的兩倍,根據鼠標位置的移動來顯示遮罩層里面的內容

實現步驟:
1.當鼠標進入,顯示遮罩層
2.遮罩層要跟隨鼠標
3.顯示放大區域

使用vueuse 工具庫中的 useMouseInElement 方法
它可以檢測到鼠標距離左上角的距離和當前鼠標是否在元素內,useMouseInElement內有三個屬性

isOutside : 檢查鼠標是否在元素**外部** elementX : 檢測鼠標當前位置離元素的X軸的距離 elementY : 檢測鼠標當前位置離元素的Y軸的距離

得到鼠標是否在元素內部,可以通過v-show讓遮罩層顯示或隱藏

//聲明一個自定義計算屬性position const target = ref(null) const { isOutside, elementX, elementY } = useMouseInElement(target) const position = computed(() => {//遮罩層的大小為200*200,name中心點到邊角的中心點就是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' }" //遮罩層跟隨鼠標 ></div>

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

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

就可實現放大鏡效果

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。