Bom——放大鏡，0基礎web前端開發

 .img .big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
}
.img .big img {
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 1000px;
}

javascript


1.
2.
3.
4.
5.
6.
7.

 // 鼠標經過小盒子，黃色圖層與大盒子顯示，否則隱藏
var img = document.querySelector('.img');
var see = document.querySelector('.see');
var big = document.querySelector('.big');
img.addEventListener('mouseover', function(e) {
see.style.display = 'block';
big.style.display = 'block';
})
img.addEventListener('mouseout', function(e) {
see.style.display = 'none';
big.style.display = 'none';
})
// 黃色遮罩層跟隨鼠標(把鼠標在盒子內的坐標給遮罩層)
img.addEventListener('mousemove', function(e) {
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 讓鼠標在遮罩層的中間，即遮擋層移動的距離
var seeX = x - see.offsetWidth / 2;
var seeY = y - see.offsetHeight / 2;
// 這是盒子所能移動的最大的距離，正方形長寬相等，設置一個即可
var moveX = img.offsetWidth - see.offsetWidth;
// 當遮罩層到達盒子的邊緣（即坐標小於等於0時），則讓其等於0
if (seeX <= 0) {
seeX = 0;
} // 以遮罩層的左邊和上邊為基准，因此用大盒子减去遮罩層，剩餘的距離即是遮罩層可移動的距離
else if (seeX >= moveX) {
seeX = moveX;
}
if (seeY <= 0) {
seeY = 0;
} else if (seeY >= moveX) {
seeY = moveX;
}
see.style.left = seeX + 'px';
see.style.top = seeY + 'px';
// 移動黃色遮罩層，大圖片跟隨移動（等比關系）
// 遮擋層移動距離 / 遮擋層最大移動距離 = 大圖片移動距離 / 大圖片最大移動距離
var pic = document.querySelector('.big_pic'); // 大圖片
var maxPic = pic.offsetWidth - big.offsetWidth; // 大圖片最大移動距離
var bb = maxPic * seeX / moveX;
var cc = maxPic * seeY / moveX;
// 要給圖盒子的圖片添加定比特，才能使用left和top的值
pic.style.left = -bb + 'px';
pic.style.top = -cc + 'px';
})
})

### [](
)難錯點
1. 遮罩層最大移動距離
![Bom——放大鏡，0基礎web前端開發_Web](https://s9.51cto.com/images/20210919/1632031085235472.jpg)
2. 大盒子移動是負值


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

 pic.style.top = -cc + 'px';

當為正值時效果如下圖所示
![Bom——放大鏡，0基礎web前端開發_Web_02](https://s4.51cto.com/images/20210919/1632031086307493.jpg)
如果不加負號，用戶鼠標向右移動時大圖片也會向右移動，即顯示左邊空白部分
### 最後
喜歡的話別忘了關注、點贊哦~
**[CodeChina開源項目：【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
> ![Bom——放大鏡，0基礎web前端開發_程序員_03](https://s6.51cto.com/images/20210919/1632031087586134.jpg)


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.