滑鼠移動的時候黃色背景層跟著移動
16 content.addeventlistener('mousemove', function
(e) else
if (maskx >=maskmax)
30if (masky <= 0) else
if (masky >=maskmax)
35 mask.style.left = maskx + 'px'
36 mask.style.top = masky + 'px'
37//
大的移動距離 = 黃色背景圖層移動距離 * 大最大移動距離 / 黃色背景圖層最大移動距離
38var bigimg = document.queryselector('#bigimg')
39var bigmax = bigimg.offsetwidth -big.offsetwidth;
40//
大的移動距離
js 仿京東放大鏡
功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層，大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...
仿京東放大鏡效果
案例分析 1.整個案例可以分為三個功能模組 2.滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開時2個盒子隱藏功能 3.黃色的遮擋層跟隨滑鼠移動功能 4.移動黃色遮擋層，大跟隨移動功能。效果 html部分 1 doctype html 2 html lang en 3 head 4 meta char...
京東放大鏡效果
先上html和css box box1 box1 img mask mask hover box2 box2 img 前面滑鼠覆蓋出現，滑鼠離開消失等都不難。先獲取各個元素，設定display屬性就好了。直接上 let mask document.queryselector mask let box...