图片放大镜 js

<div class="img-magnifier-container">
  <img id="myimage" src="your-image.jpg" width="600" height="400">
  <div id="myresult" class="magnifier"></div>
</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.getElementById('myresult');

img.addEventListener('mousemove', moveMagnifier);
img.addEventListener('mouseleave', hideMagnifier);

function moveMagnifier(e) {
  const imgRect = img.getBoundingClientRect();
  const magnifierWidth = magnifier.offsetWidth / 2;
  const magnifierHeight = magnifier.offsetHeight / 2;

  let x = e.pageX - imgRect.left - window.pageXOffset - magnifierWidth;
  let y = e.pageY - imgRect.top - window.pageYOffset - magnifierHeight;

  x = Math.max(Math.min(x, img.width - magnifier.offsetWidth), 0);
  y = Math.max(Math.min(y, img.height - magnifier.offsetHeight), 0);

  magnifier.style.left = x + 'px';
  magnifier.style.top = y + 'px';
  magnifier.style.backgroundImage = `url('${img.src}')`;
  magnifier.style.backgroundSize = (img.width * 3) + 'px ' + (img.height * 3) + 'px';
  magnifier.style.backgroundPosition = `-${x * 3}px -${y * 3}px`;
  magnifier.style.display = 'block';
}

function hideMagnifier() {
  magnifier.style.display = 'none';
}