放大镜效果 - 技术栈

放大镜效果

The_era_achievs_hero2025-02-18 12:31

题九：放大镜效果

要求：

1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；

2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。

原理：

首先把要放大的图片先size*2.4倍，位置要从零开始，绑定事件mousemove一定不要写错。
定位鼠标在视口的位置，在减去图片离视口的位置，就是鼠标在图片中的位置，高度的话还要减去滚动卷去的高度。
最后在图片的范围内，实现放大效果（加-才能网正方向去）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con { width: 100%; height: 1000px; } .small { width: 400px; height: 400px; background-image: url(./任务/交互图片/9.jpg); background-repeat: no-repeat; background-size: cover; border: 1px solid black; display: inline-block; } .big { width: 400px; height: 400px; border: 1px solid black; display: inline-block; background-image: url(./任务/交互图片/9.jpg); background-repeat: no-repeat; background-size: 960px ,960px; background-position: 0,0; }
```
 </style>
```
</head> <body>

<script>
```
     const small = document.querySelector('.small');
     const big = document.querySelector('.big');

     small.addEventListener('mousemove', function (e) {
         const rect = small.getBoundingClientRect();
         let x = e.pageX - rect.left;
         let y = e.pageY - rect.top - document.documentElement.scrollTop;

         if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
           
             big.style.backgroundPositionX = -x * 2.4 + 'px';
             big.style.backgroundPositionY = -y * 2.4 + 'px';
         }
     });
 </script>
```
</body> </html>

视频：

放大镜效果