具體效果如圖下，左邊半透明小罩罩是放大鏡，右邊大框框是顯示效果啦
1.我們得做乙個小罩罩（放大鏡），這個小罩罩得跟著我們走哦
2.我們得根據小罩罩的位置，讓我們的大框框顯示放大後對應的位置呀
呀呀呀太難說了，直接上**吧
html結構
我把結構分成了兩部分，第一部分是放原圖和放大鏡的，第二部分是放大後的效果圖的。
css要注意的是一定要有定位哦，因為我們得通過定位讓放大鏡移動嘛，放大效果圖也一樣的哦。
*
.box
.box>.box1
.box>.box1>img
.box>.box1>.magnifyingglass
.box>.box2
.box>.box2>img
這個每一點我都有注釋哦，超良心博主就是my啦
// 獲取dom元素呀
var bigglass = document.
queryselector
('.magnifyingglass'
)var box1 = document.
queryselector
('.box1'
)var img = document.
queryselectorall
('img')[
1]// 先讓小罩罩和大框框裡面的隱藏哦
img.style.display =
'none'
bigglass.style.display =
'none'
// 這個是滑鼠在瀏覽器上滑動觸發的事件啦
document.
onmousemove
=function
(e)else
}
放大鏡原生實現
分析 難點列出 1.滑鼠在區域時，透明小區域出現，放大的區域出現 2.滑鼠移出時，透明小區域小時，放大區域消失 3.透明小區域隨著滑鼠移動 難點解決關鍵 對應解決回答 1.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為block 2.通過滑鼠onmou...
原生js實現放大鏡效果
我們平時在電商 購物時，需要對選取的某乙個商品進行詳情檢視，此時當滑鼠在商品上某一部分移動檢視時旁邊就會出現乙個該部分的放大效果，這樣就能夠更好的對商品進行分析，下面就使用原生js來實現一下類似放大鏡的效果。思路分析 1.滑鼠切換列表時，pic盒子中的相對應切換 2.在.pic中生成乙個.zoom的...
js 仿京東放大鏡
功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層，大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...