生成一个电商放大镜HTML+jquery

好的，以下是一个简单的电商放大镜HTML和jQuery代码示例：

HTML代码：

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

jQuery代码：

$(document).ready(function() {
  $(".zoom").mousemove(function(e) {
    var imageWidth = $(".product-image img").width();
    var imageHeight = $(".product-image img").height();
    var zoomWidth = $(".zoom").width();
    var zoomHeight = $(".zoom").height();
    var mouseX = e.pageX - $(".product-image").offset().left;
    var mouseY = e.pageY - $(".product-image").offset().top;
    var zoomX = mouseX / imageWidth * zoomWidth - (zoomWidth / 2);
    var zoomY = mouseY / imageHeight * zoomHeight - (zoomHeight / 2);
    if (zoomX < 0) zoomX = 0;
    if (zoomY < 0) zoomY = 0;
    if (zoomX > zoomWidth) zoomX = zoomWidth;
    if (zoomY > zoomHeight) zoomY = zoomHeight;
    $(".zoom").css({left: zoomX, top: zoomY});
    var bgPosX = -zoomX / zoomWidth * imageWidth;
    var bgPosY = -zoomY / zoomHeight * imageHeight;
    $(".product-image img").css({left: bgPosX, top: bgPosY});
  });
});

上述代码的效果是，在鼠标悬停在图片上时，在放大镜区域显示图片的放大细节。