js产品图片局部放大效果

<div class="img-magnifier-container">
  <img id="myimage" src="product.jpg" width="600" height="400">
</div>

.img-magnifier-container {
  position: relative;
}

.magnifier {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none; /* 隐藏默认的鼠标指针 */
  /* 设置放大镜的大小 */
  width: 100px;
  height: 100px;
  /* 隐藏放大镜 */
  display: none;
  /* 放大倍数 */
  background-repeat: no-repeat;
}

const img = document.getElementById('myimage');
const magnifier = document.createElement('div');
magnifier.classList.add('magnifier');

// 放大倍数
const zoom = 2;

img.addEventListener('mouseenter', () => {
  magnifier.style.display = 'block';
});

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

img.addEventListener('mousemove', (e) => {
  const rect = img.getBoundingClientRect();
  const x = e.clientX - rect.left - magnifier.offsetWidth / 2;
  const y = e.clientY - rect.top - magnifier.offsetHeight / 2;

  // 确保放大镜不会超出图片范围
  let posX = x - magnifier.offsetWidth / 2;
  let posY = y - magnifier.offsetHeight / 2;
  if (posX < 0) posX = 0;
  if (posY < 0) posY = 0;
  if (posX > img.width - magnifier.offsetWidth) posX = img.width - magnifier.offsetWidth;
  if (posY > img.height - magnifier.offsetHeight) posY = img.height - magnifier.offsetHeight;

  magnifier.style.left = posX + 'px';
  magnifier.style.top = posY + 'px';

  const bgX = -((x * zoom) - magnifier.offsetWidth / 2);
  const bgY = -((y * zoom) - magnifier.offsetHeight / 2);
  magnifier.style.backgroundImage = `url('${img.src}')`;
  magnifier.style.backgroundSize = (img.width * zoom) + 'px ' + (img.height * zoom) + 'px';
  magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

img.parentNode.insertBefore(magnifier, img);