js放大镜效果怎么做

<div class="magnifier">
  <img src="small-image.jpg" alt="Small Image" id="smallImage">
  <div class="magnifier-lens"></div>
  <div class="magnifier-result"></div>
</div>

.magnifier {
  position: relative;
  display: inline-block;
}

.magnifier-lens {
  position: absolute;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.magnifier-result {
  position: absolute;
  top: 0;
  right: -300px; /* Adjust based on your layout */
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  overflow: hidden;
  display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  const smallImage = document.getElementById('smallImage');
  const lens = document.querySelector('.magnifier-lens');
  const result = document.querySelector('.magnifier-result');

  smallImage.addEventListener('mousemove', moveLens);
  lens.addEventListener('mousemove', moveLens);

  function moveLens(e) {
    e.preventDefault();
    const pos = getCursorPos(e);
    let x = pos.x - (lens.offsetWidth / 2);
    let y = pos.y - (lens.offsetHeight / 2);

    if (x > smallImage.width - lens.offsetWidth) { x = smallImage.width - lens.offsetWidth; }
    if (x < 0) { x = 0; }
    if (y > smallImage.height - lens.offsetHeight) { y = smallImage.height - lens.offsetHeight; }
    if (y < 0) { y = 0; }

    lens.style.left = x + 'px';
    lens.style.top = y + 'px';
    result.style.backgroundPosition = `-${x * 3}px -${y * 3}px`; // Adjust the multiplier as needed
  }

  function getCursorPos(e) {
    let a = smallImage.getBoundingClientRect();
    return {
      x: e.pageX - a.left - window.pageXOffset,
      y: e.pageY - a.top - window.pageYOffset
    };
  }

  smallImage.addEventListener('mouseenter', () => {
    lens.style.display = 'block';
    result.style.display = 'block';
    result.style.backgroundImage = `url(${smallImage.src})`;
    result.style.backgroundSize = `${smallImage.width * 3}px ${smallImage.height * 3}px`; // Adjust the multiplier as needed
  });

  smallImage.addEventListener('mouseleave', () => {
    lens.style.display = 'none';
    result.style.display = 'none';
  });
});