js商品放大器的代码及解读

以下是一个简单的 JavaScript 商品放大器的代码示例：

HTML 代码：

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

CSS 代码：

.product {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

.zoom {
  display: none;
  position: absolute;
  top: 0;
  left: 310px;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-position: 0 0;
}

JavaScript 代码：

var img = document.querySelector('.product img');
var zoom = document.querySelector('.product .zoom');
var zoomImg = new Image();
zoomImg.src = img.src;

img.addEventListener('mousemove', function(e) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  var zoomX = x / this.offsetWidth * zoomImg.width;
  var zoomY = y / this.offsetHeight * zoomImg.height;
  zoom.style.backgroundImage = 'url(' + zoomImg.src + ')';
  zoom.style.backgroundPosition = -zoomX + 'px ' + -zoomY + 'px';
  zoom.style.display = 'block';
});

img.addEventListener('mouseleave', function() {
  zoom.style.display = 'none';
});

解释如下：

1. 首先，通过 `querySelector` 方法获取到商品图片和放大器元素。

2. 创建一个 `Image` 对象 `zoomImg`，用于加载并显示放大的图片。

3. 给商品图片绑定 `mousemove` 事件，当鼠标移动到图片上时触发。

4. 在 `mousemove` 事件处理函数中，首先计算出鼠标相对于图片的坐标，然后根据比例计算出放大后的图片的位置。

5. 将放大后的图片设置为放大器元素的背景，并设置背景位置为计算出的位置，最后将放大器元素显示出来。

6. 给商品图片绑定 `mouseleave` 事件，当鼠标离开图片时触发，将放大器元素隐藏起来。

这段代码实现了一个简单的商品放大器，当鼠标移动到商品图片上时，会显示放大的图片，并随着鼠标的移动而跟随，当鼠标离开图片时，放大器元素会隐藏起来。需要注意的是，这只是一个简单的示例，实际应用中需要根据需求进行更加复杂的功能实现和性能优化。