当前位置：首页 > JavaScript

js放大镜的实现原理

2026-04-03 19:03:35JavaScript

实现原理

放大镜的核心原理是通过监听鼠标事件，获取鼠标在原始图片上的位置，动态计算并显示放大区域的图像。通常涉及以下关键步骤：

事件监听：绑定鼠标移动事件（mousemove）到原始图片或容器上，实时获取鼠标坐标。
坐标转换：将鼠标在原始图片上的位置转换为放大镜显示区域的对应位置，通常需要计算比例关系。
图像裁剪与放大：根据鼠标位置裁剪原始图片的局部区域，通过CSS或Canvas放大显示。

实现步骤

1. 基础HTML结构

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

2. CSS样式

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

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

.magnifier-glass {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-repeat: no-repeat;
  display: none;
  pointer-events: none;
}

3. JavaScript逻辑

js放大镜的实现原理

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

// 放大镜显示比例
const zoomLevel = 2;

originalImg.addEventListener('mousemove', (e) => {
  // 获取鼠标在图片内的相对坐标
  const rect = originalImg.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // 防止放大镜超出图片边界
  if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
    magnifierGlass.style.display = 'none';
    return;
  }

  // 更新放大镜位置
  magnifierGlass.style.display = 'block';
  magnifierGlass.style.left = `${x - magnifierGlass.offsetWidth / 2}px`;
  magnifierGlass.style.top = `${y - magnifierGlass.offsetHeight / 2}px`;

  // 计算放大区域背景位置
  const bgX = -x * zoomLevel + magnifierGlass.offsetWidth / 2;
  const bgY = -y * zoomLevel + magnifierGlass.offsetHeight / 2;

  magnifierGlass.style.backgroundImage = `url(${originalImg.src})`;
  magnifierGlass.style.backgroundSize = `${rect.width * zoomLevel}px ${rect.height * zoomLevel}px`;
  magnifierGlass.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

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