当前位置：首页 > JavaScript

如何用js实现放大镜

2026-01-31 10:05:48JavaScript

实现放大镜效果的方法

使用JavaScript实现放大镜效果通常需要结合HTML和CSS，以下是具体实现步骤：

创建基础HTML结构

在HTML中设置一个容器元素，包含原始图片和放大镜区域：

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

添加基本CSS样式

设置放大镜的样式和初始隐藏状态：

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

#original-image {
  width: 100%;
  height: auto;
}

.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实现逻辑

编写JavaScript代码处理鼠标交互和放大效果：

const container = document.querySelector('.magnifier-container');
const originalImg = document.getElementById('original-image');
const magnifier = document.querySelector('.magnifier');

// 设置放大倍数
const zoomLevel = 2;

container.addEventListener('mousemove', (e) => {
  // 显示放大镜
  magnifier.style.display = 'block';

  // 获取鼠标位置
  const x = e.clientX - container.getBoundingClientRect().left;
  const y = e.clientY - container.getBoundingClientRect().top;

  // 限制放大镜不超出图片边界
  const magnifierWidth = magnifier.offsetWidth;
  const magnifierHeight = magnifier.offsetHeight;

  let posX = x - magnifierWidth/2;
  let posY = y - magnifierHeight/2;

  posX = Math.max(0, Math.min(posX, container.offsetWidth - magnifierWidth));
  posY = Math.max(0, Math.min(posY, container.offsetHeight - magnifierHeight));

  // 设置放大镜位置
  magnifier.style.left = `${posX}px`;
  magnifier.style.top = `${posY}px`;

  // 计算背景位置
  const bgX = (x / container.offsetWidth) * 100;
  const bgY = (y / container.offsetHeight) * 100;

  // 设置放大镜背景
  magnifier.style.backgroundImage = `url(${originalImg.src})`;
  magnifier.style.backgroundSize = `${container.offsetWidth * zoomLevel}px ${container.offsetHeight * zoomLevel}px`;
  magnifier.style.backgroundPosition = `${bgX}% ${bgY}%`;
});

container.addEventListener('mouseleave', () => {
  magnifier.style.display = 'none';
});

高级优化方案

对于更复杂的需求，可以考虑以下优化：

使用canvas实现高性能放大效果：

const canvas = document.createElement('canvas');
canvas.width = 150;
canvas.height = 150;
magnifier.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 在mousemove事件中添加：
ctx.drawImage(
  originalImg,
  x - magnifierWidth/(2*zoomLevel), y - magnifierHeight/(2*zoomLevel),
  magnifierWidth/zoomLevel, magnifierHeight/zoomLevel,
  0, 0,
  magnifierWidth, magnifierHeight
);

添加触摸屏支持：

container.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const rect = container.getBoundingClientRect();
  const x = touch.clientX - rect.left;
  const y = touch.clientY - rect.top;
  // 使用与mousemove相同的逻辑
});