js放大镜的实现原理

放大镜效果的基本原理

放大镜效果的核心是通过鼠标移动事件获取当前光标位置，动态计算放大区域的显示范围和比例。通常需要两个元素：原图容器和放大镜显示的容器。当鼠标在原图上移动时，放大镜容器显示对应位置的放大图像。

实现步骤

创建HTML结构

<div class="image-container">
  <img src="original.jpg" id="original-img">
  <div class="magnifier" id="magnifier"></div>
</div>

CSS样式设置

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
}

#original-img {
  width: 100%;
  height: 100%;
}

.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-repeat: no-repeat;
  display: none;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

JavaScript逻辑实现

const originalImg = document.getElementById('original-img');
const magnifier = document.getElementById('magnifier');

// 放大倍数
const zoomFactor = 2;

originalImg.addEventListener('mousemove', (e) => {
  magnifier.style.display = 'block';

  // 获取鼠标位置相对于图片的坐标
  const x = e.offsetX;
  const y = e.offsetY;

  // 设置放大镜位置
  magnifier.style.left = `${x - magnifier.offsetWidth / 2}px`;
  magnifier.style.top = `${y - magnifier.offsetHeight / 2}px`;

  // 计算背景位置
  const bgX = -x * zoomFactor + magnifier.offsetWidth / 2;
  const bgY = -y * zoomFactor + magnifier.offsetHeight / 2;

  // 设置放大镜背景
  magnifier.style.backgroundImage = `url('${originalImg.src}')`;
  magnifier.style.backgroundSize = `${originalImg.width * zoomFactor}px ${originalImg.height * zoomFactor}px`;
  magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

originalImg.addEventListener('mouseout', () => {
  magnifier.style.display = 'none';
});

关键点说明

鼠标位置计算使用offsetX和offsetY获取相对于图片元素的坐标，确保位置准确。

放大镜位置需要减去自身宽度和高度的一半，使放大镜中心对准鼠标位置。

背景位置计算是核心算法，通过负值偏移和放大倍数调整，实现放大区域的正确定位。

优化方向

可以添加边界检测，防止放大镜超出原图范围。

支持动态调整放大倍数，通过滑块或按钮控制zoomFactor值。

使用CSS transform实现平滑动画效果，提升用户体验。

对于大图可以考虑预加载或使用缩略图+原图的方案优化性能。