HTML+CSS+JavaScript实现放大镜

weixin_43396749

已于 2022-11-25 11:56:22 修改

阅读量765

点赞数

CC 4.0 BY-SA版权

于 2022-11-24 14:48:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43396749/article/details/128018427

本文介绍了如何利用HTML、CSS和JavaScript实现网页上的商品图片放大镜效果。首先，通过HTML创建页面布局，包括小图、遮罩层和大图容器。然后，使用JavaScript获取相关元素，并添加事件监听器来控制遮罩层和大图的显示与隐藏。接着，实现了鼠标移动时遮罩层跟随移动的功能，并按比例调整大图显示的区域。最后，详细解释了移动遮罩层和大图的逻辑，确保放大镜效果的平滑运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 页面布局

放大镜的原理是：准备两张相同的图片，一张是小图显示在商品的展示区域，另一张大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。HTML示例代码如下。CSS代码详见本书源码。

1 <div class="box">
2        <img src="images/small.jpg" >
3        <div class="mask"></div>
4        <div class="big">
5            <img src="images/big.jpg"  class="bigImg">
6        </div>
7 </div>

上述代码中，第1行代码的div是整个放大镜区域的容器；第2行代码中的img标签是小图，显示在商品的展示区域；第3行代码中div标签是鼠标移动过程中跟随鼠标的遮罩层；第4行代码的div是大图显示的容器。遮罩层和大图默认是隐藏状态。

2 功能实现

（1）.获取元素

var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var bigIMg = document.querySelector('.bigImg');

上述代码中，分别获取放大镜盒子、遮罩层、显示大图的区域和大图。

（2）.显示与隐藏遮罩层和大图区域

1 box.addEventListener('mouseover', function () {
2        mask.style.display = 'block';
3        big.style.display = 'block';
4 })
5 box.addEventListener('mouseout', function () {
6         mask.style.display = 'none';
7         big.style.display = 'none';
8 })

上述代码为放大镜盒子添加onmouseover和onmouseout事件及其处理程序，当鼠标进入放大镜盒子时，遮罩层和大图区域显示；当鼠标离开放大镜盒子时，遮罩层和大图区域隐藏。

（3）.移动遮罩层

当鼠标在放大镜盒子内移动时，遮罩层跟着鼠标移动，示例代码如下。

1 box.addEventListener('mousemove', function (e) {
2    var x = e.pageX - this.offsetLeft;
3    var y = e.pageY - this.offsetTop; 
4    var maskX = x - mask.offsetWidth / 2;
5    var maskY = y - mask.offsetHeight / 2;             
6    var maskMax = box.offsetWidth - mask.offsetWidth;
7    if (maskX <= 0) {
8          maskX = 0;
9    } else if (maskX >= maskMax) {
10            maskX = maskMax;
11        }
12  if (maskY <= 0) {
13        maskY = 0;
14  } else if (maskY >= maskMax) {
15            maskY = maskMax;
16       }
17  mask.style.left = maskX + 'px';
18  mask.style.top = maskY + 'px';

上述代码中，第1行代码为放大镜盒子绑定鼠标移动事件及其处理程序；第2-3行代码获取鼠标在盒子内的坐标；第4-5行代码获取遮罩层的坐标；第6-16行代码限制遮罩层的横纵坐标最小值是0，最大值是盒子的宽度减去遮罩层的宽度；第17-18行代码设置遮罩层的横纵坐标。

（4）.按照比例移动大图

根据遮罩层在小图中的位置，按比例在大图中完成相应区域的展示，在第3步的第18行代码后面添加以下代码。

// 大图能移动的总距离=大图的宽度-大图区域的宽度             
19 var bigMax = bigIMg.offsetWidth - big.offsetWidth; 
// 大图的横纵坐标 = 遮罩层横纵坐标*大图能移动的总距离/遮罩层能移动的总距离
20 var bigX = maskX * bigMax / maskMax;
21 var bigY = maskY * bigMax / maskMax;
// 遮罩层与大图的移动方向相反
22 bigIMg.style.left = -bigX + 'px';
23 bigIMg.style.top = -bigY + 'px';

第19行代码计算大图移动的最大距离；第20-21行代码计算大图的横纵坐标；第22-23行代码设置大图的横纵坐标。

视频讲解：HTML+CSS+JavaScript实现网页放大镜效果_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》