jquery移过图片实现放大

在web开发过程中，经常需要实现一些图片的特效，例如放大、缩小、旋转等。其中，jquery作为一款流行的JavaScript库，可以帮助我们轻松实现这些效果。本文将介绍如何使用jquery实现图片放大效果。

首先，我们需要准备一张图片。

接下来，我们就可以使用jquery编写代码了。

// 当鼠标移动到图片上时
$("img").mousemove(function(e){
  // 获取当前鼠标的位置
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  // 计算放大镜的位置
  var lensX = x - 50;
  var lensY = y - 50;
  // 计算图片的宽度和高度
  var imgWidth = $(this).width();
  var imgHeight = $(this).height();
  // 设置放大镜的位置，保证不越出图片边界
  if (lensX  imgWidth - 100) lensX = imgWidth - 100;
  if (lensY > imgHeight - 100) lensY = imgHeight - 100;
  // 设置放大镜的位置和背景图片位置
  $(".lens").css({left:lensX,top:lensY});
  $(".big-img").css({left:-2*lensX,top:-2*lensY});
});

// 当鼠标移入图片时，显示放大镜和大图
$("img").mouseover(function(){
  $(".lens").show();
  $(".big-img").show();
});

// 当鼠标移出图片时，隐藏放大镜和大图
$("img").mouseout(function(){
  $(".lens").hide();
  $(".big-img").hide();
});

上面的代码实现了一个简单的图片放大效果。当鼠标移动到图片上时，会出现一个放大镜，同时在放大镜的镜面上显示原图的局部。当鼠标移出图片时，放大镜和大图都会隐藏起来。

最后，我们来看一下效果：

当鼠标移动到图片上时，会看到一个放大镜，其中放大镜的镜面显示了原图的局部。这个效果看起来十分酷炫，而且应用场景也很广泛，例如在电商网站上，当鼠标移动到商品图片上时，可以显示商品的详细局部，提高用户的购买欲望。