您现在的位置是：网站首页> 编程资料编程资料
HTML+CSS+JavaScript实现放大镜效果_javascript技巧_
2023-05-24
208人已围观
简介 HTML+CSS+JavaScript实现放大镜效果_javascript技巧_
本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码，供大家参考，具体内容如下
效果演示
JS 详解
HTML 和 CSS 部分放在了文章最后的源代码中，这里只对 JS 部分进行详解！
首先，需要获取操作的对象：
- 图片展示框（鼠标移入事件）
- 放大镜（显示和跟随鼠标）
- 放大镜中的图片（改变位置）
let imgShow = document.querySelector('.img-show'); // 图片展示框 let imgLarge = document.querySelector('.img-large'); // 放大镜 let img = document.querySelector('img'); // 放大镜中图片给图片展示框添加事件监听器，鼠标移入图片展示框时，显示放大镜：
imgShow.addEventListener('mouseover', function() { // 鼠标移入图片时，显示放大镜 imgLarge.style.display = "block"; });鼠标在图片展示框中移动时的事件监听器：
imgShow.addEventListener('mousemove', function(event) { // 计算鼠标在图片展示框中相对位置 let x = event.pageX - this.offsetLeft; let y = event.pageY - this.offsetTop; });注意：打印出 x，y 的值会发现，鼠标相对图片展示框的位置会出现负值，如下图所示：
而理论上应该都是正值，这是因为图片展示框采用的是 absolute 定位，并且用 transform 进行二次平移实现了水品垂直居中，我们先暂时将 transform 的平移效果注释掉，再次打印 x，y 的值：
发现相对位置全部变成了正值，由此可见：transform 平移的位置是不影响 ofsetLeft 和 offsetTop 的值。对于absolute 定位，ofsetLeft 和 offsetTop 依旧使用原始位置的值，并且坐标系也不会发生改变，依旧是原始位置的左上角，这就是为什么会出现负值，用一张动图来形容一下鼠标相对位置参考坐标系：
如果理解了 x 和 y 的值如何决定，就可以进行下一步了，下面会根据 x 和 y 的值进行一些数学计算！
接下来实现放大镜跟随鼠标移动：
// 放大镜跟随鼠标移动 imgLarge.style.left = (x + 480 - 125)+'px'; imgLarge.style.top = (y + 270 - 125)+'px';
根据上述的坐标系，（x + 480）是为了让放大镜始终跟随鼠标，（ - 125）是为了让鼠标始终保持在放大镜中间，因为放大镜的宽为 250px。如果不理解，可以先把 +480 和 -125 去掉查看效果，然后逐个加上去再查看效果。这里不再演示！
限制放大镜的查看范围：
// 放大镜超出范围后消失 if (x < -480 || x > 480 || y < -270 || y > 270) { imgLarge.style.display = "none"; }放大镜中图片的移动：
// 放大镜中图片位置的移动 img.style.left = (-(x+480)*2 + 125)+'px'; img.style.top = (-(y+270)*2 + 125)+'px';
原理就是计算出两个图片之间的比例，然后根据鼠标在图片展示框中的相对位置，计算出放大镜中图片的位置偏移量，让放大镜中的图片实现移动。
- （x+480）回归原始位置坐标系
- *2 是两张图片的比例
- -(x+480)*2 加负号是为了同方向移动，不然移动方向是相反的，可以自行尝试！
- +125 如果不加的话你会发现放大位置和原始位置对不上，可以自行尝试！
源代码
放大镜效果 