分析
難點列出
1.滑鼠在區域時，透明小區域出現，放大的區域出現
2.滑鼠移出時，透明小區域小時，放大區域消失
3.透明小區域隨著滑鼠移動
難點解決關鍵（對應解決回答）
1.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為block
2.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為none
3.通過event物件獲取滑鼠的當前座標位置，即方法event.layerx,event.layer.y,然後通過放入滑鼠事件onmoursemove監聽，不停的將透明小區域的top和left置為event.layerx,event.layer.y的值
* 放大
*/// big.style.left=smallw+smallml+50+"px";
big.style.left=50+
"px"
; big.style.top=smallmt+
"px"
; bigimgw=bigimg.offsetwidth;
// console.log("bigimgw="+bigimgw);
var scale=bigimgw/bigw;
bigimg.style.top=
-movet*scale+
"px"
; bigimg.style.left=
-movel*scale+
"px";}
<
/script>
"all"
>
"small"
>
"../images/12.png"
/>
"shadow"
>
<
/div>
"cover"
>
<
/div>
<
/div>
"big"
>
"../images/12.png"
/>
<
/div>
<
/div>
<
/body>
<
/html>效果
原生js實現放大鏡效果
我們平時在電商 購物時，需要對選取的某乙個商品進行詳情檢視，此時當滑鼠在商品上某一部分移動檢視時旁邊就會出現乙個該部分的放大效果，這樣就能夠更好的對商品進行分析，下面就使用原生js來實現一下類似放大鏡的效果。思路分析 1.滑鼠切換列表時，pic盒子中的相對應切換 2.在.pic中生成乙個.zoom的...
原生js寫放大鏡
不多，如下 放大鏡title box1,box2 box1 box2 little box style head class box1 class little box div div class box2 div var lb document.getelementsbyclassname lit...
原生js實現商品放大鏡效果
小方塊跟隨滑鼠移動 original move.style.left e.offsetx parseint getcomputedstyle original move width 0.5 px original move.style.top e.offsety parseint getcomput...