1、分析：
1.選擇元素；
2.繫結事件；
3.進入；
顯示元素。
4.移動；
遮罩層跟隨滑鼠移動的同時計算遮罩層的移動比例；
右側大圖，等比例移動；
5.離開；
隱藏元素。
2、html布局
3、css樣式可根據實際情況做調整，以下僅供參考！
.main
.s_box
.s_box img
.s_box span
.b_box
.b_box img
.list
.list li
.list li img
②新增事件原型。
③滑鼠進入原型。
④滑鼠移動原型。
⑤滑鼠離開原型。
⑥儲存例項並執行原型。
class
loupe
// 新增事件
addevent()
// 滑鼠移動事件
this
.sbox.
onmousemove
=function
(eve)
// 滑鼠離開事件
this
.sbox.
onmouseout
=function()
for(
var i=
0;i<
this
.li.length;i++)}
}// 滑鼠進入原型
over()
// 滑鼠移動原型
move
(e)if
(t >
this
.sbox.offsetheight -
this
.sspan.offsetheight)
// 設定遮罩層的位置
this
.sspan.style.left = l +
"px"
;this
.sspan.style.top = t +
"px"
;var x = l /
(this
.sbox.offsetwidth -
this
.sspan.offsetwidth)
;var y = t /
(this
.sbox.offsetheight -
this
.sspan.offsetheight)
;// 根據上一步得到的比例，計算右側大圖要移動的當前值
this
.bimg.style.left =
(this
.bbox.offsetwidth -
this
.bimg.offsetwidth)
* x +
"px"
;this
.bimg.style.top =
(this
.bbox.offsetheight -
this
.bimg.offsetheight)
* y +
"px";}
// 滑鼠離開原型
out()}
varlg
=new
loupe()
;lg.addevent()
;
js放大鏡功能
功能描述 一般頁面的的為了布局考慮，顯示大小都小於實際大小。滑鼠在上移動時，在旁邊展示乙個跟此顯示大小一樣的層。並講滑鼠附近區域對應的原始的區域按原始大小顯示在這個層中。引數描述 origimageid 要繫結的 img物件的 iddx 展示大圖相對於繫結的 img物件右方的 x軸偏移量 dy 展示...
js放大鏡特效
原理分析 當滑鼠在小上移動時，通過捕捉滑鼠在小上的位置，定位大的相應位置。同時，當滑鼠在小上移動時，右側大往相反的方向移動。放大鏡特效設計 事件捕獲 onmouseover 當滑鼠指標移動到指定物件上時發生 onmouseout 當滑鼠指標移除指定物件時發生 onmousemove 當滑鼠指標移動時...
js用物件導向的方法編寫放大鏡
隨著網上購物的逐漸火熱，放大鏡在許多的購物平台，廣泛的應用。如下圖，是京東 的放大鏡，它對使用者檢視商品的細節，作用很大 下面讓我們來看下如何用物件導向的的方法，來編寫它。在物件導向的程式編寫中 最重要的就是物件導向過程的分析，元素選擇 事件驅動 元素隱藏 小圖移動 大圖跟隨 面對物件設計 首先建乙...