js 仿京東放大鏡

功能模組

整個案例可以分為三個功能模組

滑鼠經過小盒子， 黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能

黃色的遮擋層跟隨滑鼠功能。

移動黃色遮擋層，大跟隨移動功能。

案例分析

黃色的遮擋層跟隨滑鼠功能。

把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。

首先是獲得滑鼠在盒子的座標。

之後把數值給遮擋層做為left 和top值。

此時用到滑鼠移動事件，但是還是在小盒子內移動。

發現，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半。

遮擋層不能超出小盒子範圍。

如果小於零，就把座標設定為0

如果大於遮擋層最大的移動距離，就把座標設定為最大的移動距離

html**

window.addeventlistener('load', function() )

preview_img.addeventlistener('mouseout', function() )
// 2. 滑鼠移動的時候，讓黃色的盒子跟著滑鼠來走
preview_img.addeventlistener('mousemove', function(e) else if (maskx >= maskmax) 
if (masky <= 0) else if (masky >= maskmax) 
mask.style.left = maskx + 'px';
mask.style.top = masky + 'px';
// 3. 大的移動距離 = 遮擋層移動距離 * 大最大移動距離 / 遮擋層的最大移動距離
// 大圖
var bigimg = document.queryselector('.bigimg');
// 大最大移動距離
var bigmax = bigimg.offsetwidth - big.offsetwidth;
// 大的移動距離 x y
var bigx = maskx * bigmax / maskmax;
var bigy = masky * bigmax / maskmax;
bigimg.style.left = -bigx + 'px';
bigimg.style.top = -bigy + 'px';
})})

JS 仿京東放大鏡

滑鼠移動的時候黃色背景層跟著移動 16 content.addeventlistener mousemove function e else if maskx maskmax 30if masky 0 else if masky maskmax 35 mask.style.left maskx px...

仿京東放大鏡效果

案例分析 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...