当前位置：首页 > JavaScript

js实现放大镜效果

2026-01-31 07:14:10JavaScript

实现放大镜效果的基本思路

放大镜效果通常用于电商网站或图片展示场景，允许用户通过鼠标悬停或移动查看图片的局部放大细节。核心原理是通过监听鼠标事件，计算放大区域与原始图片的比例关系，动态显示放大后的图像。

HTML结构

创建基础HTML结构，包含原始图片容器和放大镜显示区域：

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

CSS样式设置

设置容器定位和放大镜样式，确保视觉层次正确：

js实现放大镜效果

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

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

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

JavaScript核心逻辑

实现鼠标交互和放大计算功能：

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

// 计算放大比例
const zoomLevel = 2;
const magnifierSize = 150;

container.addEventListener('mousemove', (e) => {
  // 获取鼠标在容器内的相对位置
  const containerRect = container.getBoundingClientRect();
  const x = e.clientX - containerRect.left;
  const y = e.clientY - containerRect.top;

  // 确保放大镜不超出容器边界
  const halfSize = magnifierSize / 2;
  if (x < halfSize || x > containerRect.width - halfSize || 
      y < halfSize || y > containerRect.height - halfSize) {
    magnifier.style.display = 'none';
    return;
  }

  // 设置放大镜位置
  magnifier.style.display = 'block';
  magnifier.style.left = `${x - halfSize}px`;
  magnifier.style.top = `${y - halfSize}px`;

  // 计算背景位置（放大效果）
  const bgX = (x / containerRect.width) * originalImg.naturalWidth * zoomLevel;
  const bgY = (y / containerRect.height) * originalImg.naturalHeight * zoomLevel;

  magnifier.style.backgroundImage = `url(${originalImg.src})`;
  magnifier.style.backgroundSize = `${originalImg.naturalWidth * zoomLevel}px ${originalImg.naturalHeight * zoomLevel}px`;
  magnifier.style.backgroundPosition = `-${bgX - halfSize}px -${bgY - halfSize}px`;
});

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

性能优化建议

对于大尺寸图片，建议预加载图片资源避免延迟：

js实现放大镜效果

window.addEventListener('load', () => {
  const img = new Image();
  img.src = originalImg.src;
});

响应式处理

添加窗口大小变化的处理逻辑，确保容器尺寸变化时功能正常：

window.addEventListener('resize', () => {
  // 可能需要重新计算容器尺寸
});

高级功能扩展

实现可配置参数和触摸屏支持：

// 配置参数示例
const config = {
  zoomLevel: 3,
  magnifierSize: 200,
  shape: 'circle' // 或 'square'
};

// 触摸屏支持
container.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousemove', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  container.dispatchEvent(mouseEvent);
});

以上代码实现了一个基础但功能完整的图片放大镜效果，可根据实际需求调整参数和样式。核心在于精确计算鼠标位置与图片放大区域之间的映射关系，并通过CSS背景定位实现放大视觉效果。