jQuery实现图片局部放大镜效果

首先，我们需要明确几个概念：放大镜效果，鼠标移动事件以及坐标计算。

放大镜效果指的是鼠标悬停在图片上时，在某一区域内看到放大后的图片效果。鼠标移动事件指的是鼠标从一个点移动到另一个点的事件，坐标计算则是指根据鼠标位置计算图片区域的位置和大小。

具体实现步骤如下：

1. 引入jQuery库，并在HTML文档中添加一个div，用于展示放大后的图片效果。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="zoom"></div>

1. 为图片添加鼠标悬停事件，并获取鼠标悬停时的位置。

<img src="image.png" alt="product" class="product-img">

<script>
$(".product-img").hover(function(event) {
  // 获取鼠标悬停位置
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;
});
</script>

1. 根据鼠标位置计算放大镜效果的位置和大小，并显示放大后的图片。

<!-- 放大镜效果容器 -->
<div class="zoom">
  <img src="image-large.png" alt="product">
</div>

<script>
$(".product-img").hover(function(event) {
  // 获取鼠标悬停位置
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;

  // 计算放大镜效果的位置和大小
  var zoom_w = $(".zoom").width() / 2;
  var zoom_h = $(".zoom").height() / 2;
  var img_w = $(".product-img").width();
  var img_h = $(".product-img").height();
  var img_x = (img_w - zoom_w) / img_w * x;
  var img_y = (img_h - zoom_h) / img_h * y;

  // 设置放大镜效果位置和大小
  $(".zoom").css({
    left: x - zoom_w,
    top: y - zoom_h,
    backgroundPosition: -img_x + "px " + -img_y + "px"
  });

  // 显示放大后的图片
  $(".zoom").show();
}, function() {
  // 鼠标离开时隐藏放大镜效果
  $(".zoom").hide();
});
</script>

这样就实现了图片局部放大镜效果的功能。以下是两个示例说明：

示例1：用不同大小的图片实现局部放大

在HTML文档中添加两个图片，一个原图大小为200x200，另一个放大后的图片大小为400x400。然后在JavaScript代码中添加判断，当鼠标位置在原图的左半边时，显示原图，右半边时，显示放大后的图片。

<div>
  <img src="image.png" alt="product" class="product-img">
  <img src="image-large.png" alt="product" class="product-img-large" style="display:none">
  <div class="zoom"></div>
</div>

<script>
$(".product-img").hover(function(event) {
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;

  var img_w = $(".product-img").width();
  if(x < img_w / 2) {
    $(".product-img").css("display", "block");
    $(".product-img-large").css("display", "none");
  } else {
    $(".product-img").css("display", "none");
    $(".product-img-large").css("display", "block");

    var zoom_w = $(".zoom").width() / 2;
    var zoom_h = $(".zoom").height() / 2;
    var img_w = $(".product-img-large").width();
    var img_h = $(".product-img-large").height();
    var img_x = (img_w - zoom_w) / img_w * x;
    var img_y = (img_h - zoom_h) / img_h * y;

    $(".zoom").css({
      left: x - zoom_w,
      top: y - zoom_h,
      backgroundPosition: -img_x + "px " + -img_y + "px"
    });
  }

  $(".zoom").show();
}, function() {
  $(".product-img").css("display", "block");
  $(".product-img-large").css("display", "none");
  $(".zoom").hide();
});
</script>

示例2：实现多张图片的局部放大

在HTML文档中添加多张图片，并将放大镜效果容器的class改为id，为每个图片添加一个data-zoom属性，用于指定对应的放大后的图片。

<div>
  <img src="image-1.png" alt="product" class="product-img" data-zoom="image-1-large.png">
  <img src="image-2.png" alt="product" class="product-img" data-zoom="image-2-large.png">
  <img src="image-3.png" alt="product" class="product-img" data-zoom="image-3-large.png">
  <div id="zoom"></div>
</div>

<script>
$(".product-img").hover(function(event) {
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;

  var zoom_w = $("#zoom").width() / 2;
  var zoom_h = $("#zoom").height() / 2;
  var img_w = $(this).width();
  var img_h = $(this).height();
  var img_x = (img_w - zoom_w) / img_w * x;
  var img_y = (img_h - zoom_h) / img_h * y;

  $("#zoom").css({
    left: x - zoom_w,
    top: y - zoom_h,
    background: "url("+$(this).data("zoom")+") no-repeat -"+img_x+"px -"+img_y+"px"
  });

  $("#zoom").show();
}, function() {
  $("#zoom").hide();
});
</script>

这样就可以实现多张图片的局部放大效果了。