当前位置：首页 > JavaScript

用js实现放大镜效果

2026-01-30 18:07:45JavaScript

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

放大镜效果通常通过监听鼠标移动事件，动态调整放大区域的显示内容和位置。核心逻辑包括：获取鼠标位置、计算放大区域、显示放大后的图像。

HTML 结构准备

创建一个包含原始图片和放大镜容器的HTML结构。放大镜容器用于显示放大后的图像区域。

用js实现放大镜效果

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

CSS 样式设置

设置原始图片和放大镜的样式。放大镜通常为圆形或方形，需要绝对定位并隐藏默认显示。

用js实现放大镜效果

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

监听鼠标事件，计算放大镜位置和放大后的图像显示。

document.addEventListener('DOMContentLoaded', function() {
  const originalImage = document.getElementById('original-image');
  const magnifier = document.querySelector('.magnifier');
  const zoomLevel = 2; // 放大倍数

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

    // 获取鼠标位置相对于图片的坐标
    const rect = originalImage.getBoundingClientRect();
    const x = e.pageX - rect.left;
    const y = e.pageY - rect.top;

    // 防止放大镜超出图片边界
    const magnifierWidth = magnifier.offsetWidth;
    const magnifierHeight = magnifier.offsetHeight;

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

    if (posX < 0) posX = 0;
    if (posY < 0) posY = 0;
    if (posX > rect.width - magnifierWidth) posX = rect.width - magnifierWidth;
    if (posY > rect.height - magnifierHeight) posY = rect.height - magnifierHeight;

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

    // 计算放大后的背景位置
    const bgX = -posX * zoomLevel;
    const bgY = -posY * zoomLevel;

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

  originalImage.addEventListener('mouseout', function() {
    magnifier.style.display = 'none';
  });
});

使用 Canvas 实现高性能放大镜

对于更高性能的需求，可以使用Canvas来渲染放大后的图像。

// 创建Canvas元素
const canvas = document.createElement('canvas');
canvas.className = 'magnifier';
canvas.width = 150;
canvas.height = 150;
document.querySelector('.image-container').appendChild(canvas);
const ctx = canvas.getContext('2d');

// 修改mousemove事件处理
originalImage.addEventListener('mousemove', function(e) {
  canvas.style.display = 'block';

  const rect = originalImage.getBoundingClientRect();
  const x = e.pageX - rect.left;
  const y = e.pageY - rect.top;

  // 计算绘制区域
  const sx = x - canvas.width / (2 * zoomLevel);
  const sy = y - canvas.height / (2 * zoomLevel);
  const sw = canvas.width / zoomLevel;
  const sh = canvas.height / zoomLevel;

  // 清除并重绘Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(
    originalImage,
    sx, sy, sw, sh,
    0, 0, canvas.width, canvas.height
  );

  // 更新Canvas位置
  canvas.style.left = `${x - canvas.width/2}px`;
  canvas.style.top = `${y - canvas.height/2}px`;
});