鼠标悬停时放大图像标签中的图像

<div class="image-container">
  <img src="image.jpg" alt="Image" class="image">
  <div class="zoomed-image"></div>
</div>

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

.zoomed-image {
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px; /* 放大后的图像宽度 */
  height: 200px; /* 放大后的图像高度 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
}

.image-container:hover .zoomed-image {
  visibility: visible;
  opacity: 1;
}

const imageContainer = document.querySelector('.image-container');
const image = document.querySelector('.image');
const zoomedImage = document.querySelector('.zoomed-image');

imageContainer.addEventListener('mousemove', function(event) {
  const containerRect = imageContainer.getBoundingClientRect();
  const mouseX = event.clientX - containerRect.left;
  const mouseY = event.clientY - containerRect.top;
  
  const imageRect = image.getBoundingClientRect();
  const imageX = mouseX / containerRect.width * imageRect.width;
  const imageY = mouseY / containerRect.height * imageRect.height;
  
  zoomedImage.style.backgroundImage = `url(${image.src})`;
  zoomedImage.style.backgroundPosition = `-${imageX}px -${imageY}px`;
});