当前位置：首页 > JavaScript

js放大镜的实现原理

2026-01-13 14:11:16JavaScript

放大镜效果的基本原理

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

实现步骤

创建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';
});