js实现商品放大镜

商品放大镜是一种常见的电商网站交互效果，可以让用户在鼠标悬停在商品图片上时，放大图片的局部细节，提高用户购买体验。下面是一个基于JavaScript实现的商品放大镜示例：

HTML：

<div class="product-image">
  <img src="product.jpg" alt="Product">
  <div class="zoom-window"></div>
</div>

CSS:

.product-image {
  position: relative;
  width: 400px;
  height: 400px;
}

.product-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.zoom-window {
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  display: none;
  overflow: hidden;
}

JavaScript:

const productImage = document.querySelector('.product-image');
const zoomWindow = document.querySelector('.zoom-window');

productImage.addEventListener('mouseenter', () => {
  zoomWindow.style.display = 'block';
});

productImage.addEventListener('mousemove', (event) => {
  const clientX = event.clientX - productImage.offsetLeft;
  const clientY = event.clientY - productImage.offsetTop;
  const zoomX = clientX / productImage.clientWidth * 100;
  const zoomY = clientY / productImage.clientHeight * 100;

  zoomWindow.style.backgroundImage = `url(product.jpg)`;
  zoomWindow.style.backgroundSize = `${productImage.clientWidth * 2}px ${productImage.clientHeight * 2}px`;
  zoomWindow.style.backgroundPosition = `-${zoomX}% -${zoomY}%`;
  zoomWindow.style.left = `${clientX + 10}px`;
  zoomWindow.style.top = `${clientY + 10}px`;
});

productImage.addEventListener('mouseleave', () => {
  zoomWindow.style.display = 'none';
});

解释一下代码：

首先，我们通过document.querySelector()方法获取了HTML中的商品图片和放大镜容器元素，分别是.product-image和.zoom-window。

然后，我们给商品图片添加了三个事件监听器：mouseenter、mousemove和mouseleave。当鼠标进入商品图片区域时，我们显示放大镜容器；当鼠标在商品图片上移动时，我们根据鼠标位置计算出放大镜容器内的背景图像位置和偏移值，并动态设置.zoom-window的CSS样式；当鼠标离开商品图片区域时，我们隐藏放大镜容器。

注意，我们在mousemove事件处理程序中用到了event.clientX和event.clientY来获取鼠标在视口中的位置，然后减去productImage.offsetLeft和productImage.offsetTop来获取鼠标相对于商品图片左上角的位置。然后，我们计算出放大镜容器内的背景图像位置和偏移值，并动态设置.zoom-window的CSS样式。最后，我们将放大镜容器的位置设置为鼠标位置加上10像素，以便放大镜容器不会遮挡住原始图片。

这就是一个简单的基于JavaScript实现的商品放大镜。当然，你可以根据自己的需求进行修改和扩展。