css放大镜效果

<div class="magnifier-container">
  <img src="path/to/image.jpg" alt="Magnified Image" class="magnified-image">
  <div class="magnifier-lens"></div>
</div>

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

.magnified-image {
  width: 100%;
  height: auto;
}

.magnifier-lens {
  position: absolute;
  display: none;
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  background-repeat: no-repeat;
  cursor: crosshair;
  background-size: 200% 200%;
}

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.magnifier-container');
  const image = document.querySelector('.magnified-image');
  const lens = document.querySelector('.magnifier-lens');

  container.addEventListener('mousemove', function(e) {
    const rect = image.getBoundingClientRect();
    const offsetX = e.clientX - rect.left;
    const offsetY = e.clientY - rect.top;

    const x = offsetX - lens.offsetWidth / 2;
    const y = offsetY - lens.offsetHeight / 2;

    if (x > 0 && x < rect.width - lens.offsetWidth && y > 0 && y < rect.height - lens.offsetHeight) {
      lens.style.left = `${x}px`;
      lens.style.top = `${y}px`;
      lens.style.display = 'block';
      lens.style.backgroundPosition = `-${x * 2 - lens.offsetWidth / 2}px -${y * 2 - lens.offsetHeight / 2}px`;
    } else {
      lens.style.display = 'none';
    }
  });

  container.addEventListener('mouseleave', function() {
    lens.style.display = 'none';
  });
});