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

mb6130cfc2a008b 2021-09-19 14:09:14 阅读数:779

bom 放大 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.

window.addEventListener(‘load’, function() {

 // 鼠標經過小盒子,黃色圖層與大盒子顯示,否則隱藏
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.left = -bb + ‘px’;

 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.
版权声明:本文为[mb6130cfc2a008b]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919140913846r.html