js鼠标放大图片

<div class="image-container">
  <img id="myImage" src="your-image-source.jpg" width="300" height="200">
</div>

.image-container {
  position: relative;
}

.image-container .magnifier {
  position: absolute;
  border: 3px solid #000;
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: none;
  z-index: 10;
}

.image-container .magnifier img {
  position: absolute;
  width: 600px; /* 放大后的图片宽度 */
  height: auto;
}

const img = document.getElementById('myImage');
const magnifier = document.createElement('div');
magnifier.classList.add('magnifier');
img.parentNode.insertBefore(magnifier, img.nextSibling);

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;

  // 限制放大镜的位置不超出图片范围
  const maxX = img.width - magnifier.offsetWidth;
  const maxY = img.height - magnifier.offsetHeight;
  const posX = Math.min(Math.max(0, x), maxX);
  const posY = Math.min(Math.max(0, y), maxY);

  magnifier.style.left = `${posX}px`;
  magnifier.style.top = `${posY}px`;

  const zoom = 2; // 放大倍数
  magnifier.querySelector('img').style.transform = `translate(-${x * zoom}px, -${y * zoom}px) scale(${zoom})`;
});

// 初始化放大镜内的图片
const magnifierImg = document.createElement('img');
magnifierImg.src = img.src;
magnifier.appendChild(magnifierImg);