jquery图片放大镜代码

以下是两种jQuery图片放大镜的代码：

1. 使用HTML和CSS实现图片放大镜效果：

<div id="box">
  <img src="./哈哈.jpg" alt=""> // 正常显示的图片
 <div id="xiao"></div>
</div>
<div id="box2">
  <img src="./哈哈.jpg" alt="" id="big"> // 要放大的图片
</div>

<style>
#box {
  position: relative;
  width: 400px;
  height: 400px;
}

#xiao {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#box2 {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

#big {
  position: absolute;
  width: 800px;
  height: 800px;
  display: none;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#box").mousemove(function(e) {
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;
    var xPercent = x / $(this).width();
    var yPercent = y / $(this).height();
    var bigImgWidth = $("#big").width();
    var bigImgHeight = $("#big").height();
    var moveX = -(bigImgWidth - $(this).width()) * xPercent;
    var moveY = -(bigImgHeight - $(this).height()) * yPercent;
    $("#big").css({
      "left": moveX,
      "top": moveY
    });
    $("#xiao").css({
      "left": x - 50,
      "top": y - 50
    });
  });

  $("#box").hover(function() {
    $("#xiao").show();
    $("#big").show();
  }, function() {
    $("#xiao").hide();
    $("#big").hide();
  });
});
</script>

2. 使用jQuery插件实现图片放大镜效果：

<div id="smallBox">
  <img src="/img/1.png" alt="">
  <div id="zoom"></div>
</div>
<div id="bigBox">
  <img src="/img/1.png" alt="">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.elevatezoom.js"></script>
<script>
$(document).ready(function() {
  $("#smallBox").elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 500
  });
});
</script>