放大镜效果
- IT业界
- 2025-09-07 21:30:01
题九：放大镜效果
要求： 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> <div class="con"> <div class="small"> <div class="black"></div> </div> <div class="big"></div> </div> <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>视频：
放大镜效果
