放大镜效果边缘显示异常的修复方案咨询

问题背景 #

正在实现放大镜效果：鼠标移到图片上方时，显示光标下方区域的放大版本。现有代码整体可用，但图片边缘处失效——期望光标到边缘时，放大镜显示半圆图像（另一半为白色），实际效果与理想效果不符：

源图片：

理想边缘效果：

错误边缘效果：

现有代码 #

HTML

<div class="image-wrapper">
  <img src="https://i.sstatic.net/JzS3fR2C.jpg" alt="Sample Image" style="opacity: 0.1;" class="image">
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.image-wrapper {
  position: relative;
  box-sizing: border-box;
  border: 1px dashed gray;
}

.image {
  width: 300px;
  height: auto;
  cursor: none;
}

.image-wrapper .glass {
  opacity: 0;
}

.image-wrapper:hover .glass {
  opacity: 1;
}

.glass {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: none;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.2s;
  border: 1px solid black;
  /* 若需要放大镜空白部分为白色，添加以下样式 */
  /* background-color: white; */
}

JavaScript

let zoom = 2;

window.addEventListener('load', () => {
  const image = document.querySelector('.image'),
    { width, height } = image.getBoundingClientRect(),
    glass = document.createElement('div');

  document.querySelector('.image-wrapper').append(glass);
  glass.classList.add('glass');
  glass.style.backgroundSize = `${zoom * width}px ${zoom * height}px`;
  glass.style.backgroundImage = `url(${image.src})`;

  image.addEventListener('mousemove', (e) => {
    const { offsetX, offsetY } = e,
      glassX = offsetX - glass.offsetWidth / 2,
      glassY = offsetY - glass.offsetHeight / 2;

    glass.style.left = `${glassX}px`;
    glass.style.top = `${glassY}px`;

    glass.style.backgroundPosition = `-${offsetX * zoom}px -${offsetY * zoom}px`;
  });
});

问题原因 #

1. 放大镜位置未做边界限制：当鼠标靠近图片边缘时，.glass元素会超出.image-wrapper的范围，导致部分区域在图片外。
2. 背景偏移计算未考虑边界：直接使用offsetX*zoom计算背景位置，当鼠标靠近边缘时，背景会偏移到图片之外的区域，显示空白。

修复方案 #

通过限制放大镜的位置范围和修正背景偏移计算，确保放大镜始终在图片容器内，且放大区域始终对应图片有效范围。

修改后的JavaScript代码 #

let zoom = 2;

window.addEventListener('load', () => {
  const image = document.querySelector('.image'),
    { width, height } = image.getBoundingClientRect(),
    glass = document.createElement('div');

  document.querySelector('.image-wrapper').append(glass);
  glass.classList.add('glass');
  glass.style.backgroundSize = `${zoom * width}px ${zoom * height}px`;
  glass.style.backgroundImage = `url(${image.src})`;

  // 提前获取放大镜的尺寸，避免重复计算
  const glassWidth = glass.offsetWidth;
  const glassHeight = glass.offsetHeight;

  image.addEventListener('mousemove', (e) => {
    const { offsetX, offsetY } = e;

    // 1. 限制放大镜的位置，确保不超出图片容器
    // 最小left值为0，最大left值为图片宽度 - 放大镜宽度
    const glassX = Math.max(0, Math.min(offsetX - glassWidth / 2, width - glassWidth));
    // 最小top值为0，最大top值为图片高度 - 放大镜高度
    const glassY = Math.max(0, Math.min(offsetY - glassHeight / 2, height - glassHeight));

    glass.style.left = `${glassX}px`;
    glass.style.top = `${glassY}px`;

    // 2. 基于放大镜的实际位置计算背景偏移
    // 放大镜中心对应的图片坐标 = 放大镜左上角位置 + 放大镜一半尺寸
    const centerX = glassX + glassWidth / 2;
    const centerY = glassY + glassHeight / 2;
    glass.style.backgroundPosition = `-${centerX * zoom}px -${centerY * zoom}px`;
  });
});

修复说明 #

• 位置限制：使用Math.max(0, Math.min(计算值, 最大边界))确保放大镜的左上角坐标始终在[0, 图片宽度-放大镜宽度]和[0, 图片高度-放大镜高度]范围内，避免超出图片容器。
• 背景偏移修正：不再直接使用鼠标的offsetX/Y计算背景位置，而是基于放大镜的实际位置计算其中心对应的图片坐标，再乘以缩放比例，确保放大区域始终是图片内的有效部分。
• 若需要放大镜超出图片的部分显示白色，可给.glass添加background-color: white;样式。

内容的提问来源于stack exchange，提问作者Andrew Foulds