怎样在JavaScript中实现图片放大镜？

图片放大镜是前端开发中常见的交互功能，核心逻辑是通过监听鼠标在原图上的移动，同步计算对应区域在放大图中的显示位置，从而实现局部放大的效果。下面我们一步步实现这个功能。

实现思路梳理

要实现图片放大镜，我们需要完成以下几个核心步骤：

• 搭建基础页面结构，包含原图容器、放大镜遮罩、放大图容器三个部分
• 监听原图容器上的鼠标移入、移动、移出事件，控制遮罩和放大图的显示隐藏
• 根据鼠标在原图上的坐标，计算遮罩的位置，同时映射出放大图的显示位置
• 调整样式和比例，保证放大后的内容与原图局部区域完全对应

页面结构搭建

首先我们需要创建三个核心元素，原图容器用来展示原始大小的图片，遮罩是鼠标移动时跟随的半透明区域，放大图容器用来展示放大后的图片内容。代码如下：

<div class="magnifier-container">
  <!-- 原图区域 -->
  <div class="origin-box" id="originBox">
    <img src="https://picsum.photos/400/300?random=2" alt="原始图片" class="origin-img" id="originImg">
    <!-- 放大镜遮罩 -->
    <div class="mask" id="mask"></div>
  </div>
  <!-- 放大图区域 --></div>

基础样式设置

接下来给元素设置基础样式，原图容器设置相对定位，遮罩默认隐藏，放大图容器也默认隐藏，并且放大图的尺寸要大于原图，这里设置放大倍率为2倍。代码如下：

.magnifier-container {
  display: flex;
  gap: 20px;
}
.origin-box {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  cursor: move;
}
.origin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mask {
  position: absolute;
  width: 200px;
  height: 150px;
  background: rgba(255, 255, 0, 0.3);
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}
.big-box {
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  overflow: hidden;
  display: none;
}
.big-img {
  width: 800px;
  height: 600px;
  object-fit: cover;
}

JavaScript逻辑实现

核心逻辑部分需要处理鼠标事件，计算坐标和映射位置，我们一步步实现：

获取DOM元素

首先获取需要用到的所有DOM元素，方便后续操作：

// 获取DOM元素
const originBox = document.getElementById('originBox');
const originImg = document.getElementById('originImg');
const mask = document.getElementById('mask');
const bigBox = document.getElementById('bigBox');
const bigImg = document.getElementById('bigImg');

// 计算放大倍率 放大图尺寸 / 原图尺寸
const scaleX = bigImg.offsetWidth / originImg.offsetWidth;
const scaleY = bigImg.offsetHeight / originImg.offsetHeight;

监听鼠标移入事件

当鼠标移入原图容器时，显示遮罩和放大图容器：

// 鼠标移入原图容器 显示遮罩和放大图
originBox.addEventListener('mouseenter', function() {
  mask.style.display = 'block';
  bigBox.style.display = 'block';
});

监听鼠标移动事件

鼠标移动时，计算遮罩的位置，同时根据比例计算放大图的显示位置，这里需要注意边界判断，避免遮罩超出原图范围：

// 鼠标在原图容器移动
originBox.addEventListener('mousemove', function(e) {
  // 获取鼠标相对于原图容器的坐标
  let x = e.pageX - originBox.offsetLeft - mask.offsetWidth / 2;
  let y = e.pageY - originBox.offsetTop - mask.offsetHeight / 2;

  // 边界判断 防止遮罩超出原图范围
  const maxX = originBox.offsetWidth - mask.offsetWidth;
  const maxY = originBox.offsetHeight - mask.offsetHeight;
  x = Math.max(0, Math.min(x, maxX));
  y = Math.max(0, Math.min(y, maxY));

  // 设置遮罩位置
  mask.style.left = x + 'px';
  mask.style.top = y + 'px';

  // 计算放大图的位置 放大图移动距离 = 遮罩移动距离 * 放大倍率 方向相反
  const bigX = -x * scaleX;
  const bigY = -y * scaleY;
  bigImg.style.marginLeft = bigX + 'px';
  bigImg.style.marginTop = bigY + 'px';
});

监听鼠标移出事件

鼠标移出原图容器时，隐藏遮罩和放大图容器：

// 鼠标移出原图容器 隐藏遮罩和放大图
originBox.addEventListener('mouseleave', function() {
  mask.style.display = 'none';
  bigBox.style.display = 'none';
});

注意事项

在实际使用中，需要注意以下几点：

• 放大图的尺寸需要和计算出来的倍率匹配，否则会出现显示内容错位的问题
• 如果原图是动态加载的，需要在图片加载完成后再计算倍率，避免拿到错误的尺寸
• 可以调整遮罩的尺寸和放大倍率，适配不同的展示需求
• 如果页面有多个图片需要添加放大镜效果，可以把逻辑封装成函数，通过传入不同的容器ID复用代码

以上代码实现了基础的图片放大镜功能，开发者可以根据实际业务需求调整样式和参数，比如添加过渡动画、支持触摸事件等，让交互体验更好。

JavaScript图片放大镜事件监听DOM操作坐标计算修改时间：2026-05-29 23:56:03