原生js實現放大鏡效果

我們平時在電商**購物時，需要對選取的某乙個商品進行詳情檢視，此時當滑鼠在商品上某一部分移動檢視時旁邊就會出現乙個該部分的放大效果，這樣就能夠更好的對商品進行分析，下面就使用原生js來實現一下類似放大鏡的效果。

思路分析：

1.滑鼠切換列表時，.pic盒子中的相對應切換

2.在.pic中生成乙個.zoom的盒子，移動該盒子時類似對.pic盒子中的進行剪下

2.1 動態獲取.zoom盒子相對.pic盒子的background-positin屬性值

2.2 對.zoom盒子的移動範圍進行限制（只在.pic盒子中移動）

3.將剪下的按比例放大顯示到.details的盒子中

注：放大比例 = 左邊盒子的大小 / 裡面進行剪下的盒子大小，該比例值作為右邊盒子顯示內容的大小

**如下：

>原生js實現放大鏡

html部分

@charset "utf-8";

* libody #wrap #wrap .pic img #wrap .pic .zoom #wrap .list #wrap .list li#wrap .list .current#wrap .list img #wrap .details 

1

var list = document.queryselector(' .list '),
2 img = document.queryselector(' .pic img '),
3 li_list = list.queryselectorall(' li '),
4 pic = document.queryselector(' #wrap .pic '),
5 zoom = document.queryselector(' .zoom '),
6 details = document.queryselector(' .details ')
78 list.addeventlistener('click', function
(e) )
19 e.target.parentnode.classname = 'current'; //
通過e.target找到其父元素並新增上類名
20//
console.log(li_list)21}
22 }, false)23
24 pic.addeventlistener('mousemove', function
(e) 
40if(tx > 250)
43if(ty < 0)
46if(ty > 250)
4950 details.style.backgroundposition = (tx / 250 * 100 + '%') + (ty / 250 * 100 + '%')
5152 zoom.style.left = tx + 'px'
53 zoom.style.top = ty + 'px';
54 })

最終效果：

總結：

整體先實現靜態效果，然後根據需求進行一步步邏輯**的編寫，從而實現整個效果

原生js實現商品放大鏡效果

小方塊跟隨滑鼠移動 original move.style.left e.offsetx parseint getcomputedstyle original move width 0.5 px original move.style.top e.offsety parseint getcomput...

放大鏡原生實現

分析 難點列出 1.滑鼠在區域時，透明小區域出現，放大的區域出現 2.滑鼠移出時，透明小區域小時，放大區域消失 3.透明小區域隨著滑鼠移動 難點解決關鍵 對應解決回答 1.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為block 2.通過滑鼠onmou...

最簡單原生js實現京東放大鏡效果

具體效果如圖下，左邊半透明小罩罩是放大鏡，右邊大框框是顯示效果啦 1.我們得做乙個小罩罩 放大鏡 這個小罩罩得跟著我們走哦 2.我們得根據小罩罩的位置，讓我們的大框框顯示放大後對應的位置呀 呀呀呀太難說了，直接上 吧 html結構 我把結構分成了兩部分，第一部分是放原圖和放大鏡的，第二部分是放大後的...