【www.bbyears.com--jquery】

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(function(){
 var m = $(".lxf-min"), l = $(".lxf-large"), v = $(".lxf-mover"), c = $(".content"), size = 2.74;
    m.hover(
    function(){
  l.load("http://www.liuxiaofan.com/demo/magnifier/mbp.html");
  v.fadeIn();
  }
 );
 c.mousemove(function(e){
  var x = e.pageX - c.offset().left;
        var y = e.pageY - c.offset().top;
  v.css({
    top: y - 110,
    left: x - 110}
       );
  l.css({
    left: -(e.pageX - c.offset().left)*size,
    top: -(e.pageY - c.offset().top)*size
     });
  if ((x < -size) || (x > c.width() + size) || (y < -size) || (y > c.height() + size) ){v.fadeOut("slow");};
         });
});
</script>

图片放大镜

实现原理：准备2张图片，原大图及缩略图。

当页面载人的时候正常显示缩略图，然后当鼠标经过缩略图的时候AJAX加载原大图。

使用jQuery的e.pageX方法提取鼠标经过图片时的坐标，再将遮罩的绝对定位时的坐标值赋值，同时改变大图的坐标值，达到显示位置的准确性。

当鼠标离开小图区域的时候隐藏遮罩。

本效果为刘晓帆原创，转载请注明出处，谢谢！

效果图如下

注：jquery文件我这里不提供下载，大家可以到官网去下载一个最新的包方可。

本文来源：http://www.bbyears.com/wangyezhizuo/34555.html