使用Jquery进行鼠标悬停时放大图像？

<div id="magnifying-glass" style="display:none; position:absolute;"></div>

$(document).ready(function() {
  // 获取原始图像
  var $image = $('img');

  // 鼠标移动到图像上时执行
  $image.on('mousemove', function(event) {
    // 获取鼠标相对于图像的位置
    var mouseX = event.pageX - $image.offset().left;
    var mouseY = event.pageY - $image.offset().top;

    // 获取放大图像容器
    var $magnifyingGlass = $('#magnifying-glass');

    // 设置放大图像容器的位置和大小
    $magnifyingGlass.css({
      'left': mouseX - $magnifyingGlass.width() / 2,
      'top': mouseY - $magnifyingGlass.height() / 2,
      'background-image': 'url(' + $image.attr('src') + ')',
      'background-size': $image.width() + 'px',
      'display': 'block'
    });
  });

  // 鼠标离开图像时隐藏放大图像容器
  $image.on('mouseleave', function() {
    $('#magnifying-glass').css('display', 'none');
  });
});

#magnifying-glass {
  width: 150px;
  height: 150px;
  border: 3px solid #000;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: none;
  z-index: 1000;
}