当前位置：首页 > JavaScript

用js实现放大镜效果

2026-04-04 09:50:26JavaScript

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

放大镜效果通常通过监听鼠标移动事件，在小图上显示一个局部放大的区域，并将对应的大图部分显示在放大区域中。核心步骤包括创建放大镜的DOM结构、计算放大比例和位置、实时更新放大区域。

HTML结构

创建一个包含小图容器、放大镜遮罩和大图容器的结构：

<div class="magnifier-container">
  <img src="small-image.jpg" class="small-image" id="smallImage">
  <div class="magnifier-glass" id="magnifierGlass"></div>
</div>
<div class="large-image-container">
  <img src="large-image.jpg" class="large-image" id="largeImage" style="display: none;">
</div>

CSS样式

设置放大镜遮罩的样式和隐藏大图：

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

.small-image {
  width: 100%;
  height: auto;
}

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

.large-image-container {
  display: none;
}

JavaScript实现

监听鼠标事件并计算放大区域：

document.addEventListener('DOMContentLoaded', function() {
  const smallImage = document.getElementById('smallImage');
  const magnifierGlass = document.getElementById('magnifierGlass');
  const largeImage = document.getElementById('largeImage');

  // 计算放大比例（大图尺寸/小图尺寸）
  const zoomLevel = 2; // 可根据需要调整

  smallImage.addEventListener('mousemove', function(e) {
    // 显示放大镜
    magnifierGlass.style.display = 'block';

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

    // 防止放大镜超出小图边界
    const glassWidth = magnifierGlass.offsetWidth;
    const glassHeight = magnifierGlass.offsetHeight;

    let glassX = x - glassWidth / 2;
    let glassY = y - glassHeight / 2;

    glassX = Math.max(0, Math.min(glassX, smallImage.width - glassWidth));
    glassY = Math.max(0, Math.min(glassY, smallImage.height - glassHeight));

    // 设置放大镜位置
    magnifierGlass.style.left = `${glassX}px`;
    magnifierGlass.style.top = `${glassY}px`;

    // 计算大图显示位置
    const bgX = -glassX * zoomLevel;
    const bgY = -glassY * zoomLevel;

    // 设置放大镜背景
    magnifierGlass.style.backgroundImage = `url(${largeImage.src})`;
    magnifierGlass.style.backgroundSize = `${smallImage.width * zoomLevel}px ${smallImage.height * zoomLevel}px`;
    magnifierGlass.style.backgroundPosition = `${bgX}px ${bgY}px`;
  });

  smallImage.addEventListener('mouseout', function() {
    magnifierGlass.style.display = 'none';
  });
});

高级优化方案

性能优化：使用requestAnimationFrame代替直接mousemove事件处理，减少重绘次数。

let lastX, lastY;
function updateMagnifier() {
if (lastX !== undefined && lastY !== undefined) {
 // 更新逻辑...
}
requestAnimationFrame(updateMagnifier);
}
updateMagnifier();