JQUERY 图片放大镜的简单示例

实现原理：准备2张图片，原大图及缩略图。
当页面载人的时候正常显示缩略图，然后当鼠标经过缩略图的时候AJAX加载原大图。
使用jQuery的e.pageX方法提取鼠标经过图片时的坐标，再将遮罩的绝对定位时的坐标值赋值，同时改变大图的坐标值，达到显示位置的准确性。
当鼠标离开小图区域的时候隐藏遮罩。
css:

/*
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
<style type=text/css>
.content { margin: auto; width: 800px; border:solid 1px #EAEAEA; position: relative; height: 530px; }
h1 { width:800px; margin: auto; text-align:center; padding:20px; font-family: 微软雅黑; color: #999; }
h3 { width:800px; margin: auto; text-align:center; padding:20px; font-family: 微软雅黑; color: #999; }
p { width:800px; margin: 30px auto auto; text-align:left; color: #999; font: 12px/24px 微软雅黑; border: 1px dashed #E6E6E6; padding: 8px; }
.lxf-large { position: absolute; left: 0px; top: 0px; height: 200px; width: 200px; }
.lxf-mover { -moz-border-radius:100px;border: 3px solid #FFFFFF; overflow: hidden; height: 200px; width: 200px; position: absolute; left: -100px; top: -100px; display: none; -webkit-Box-shadow: #ccc 2px 4px 5px; -moz-Box-shadow: #ccc 2px 4px 5px; }
.lxf-min { height: 530px; width: 800px; }
</style>

js:

/*
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
<script src=http://jb51.cc/demo/js/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://jb51.cc/demo/magnifier/mbp.<a href=http://jb51.cc/ title=html>html</a>);
        v.fadeIn();
        }
    );
    c.mousemove(function(e){
        var x = e.pageX - c.offset().left;
        var y = e.pageY - c.offset().top;
        v.<a href=http://jb51.cc/ title=css>css</a>({
          top: y - 110,left: x - 110}
             );
        l.<a href=http://jb51.cc/ title=css>css</a>({
          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>

html:

<div class=content>
  <div class=lxf-min><img src=/mbp-min.jpg width=800 height=530> </div>
  <div class=lxf-mover>
    <div class=lxf-large></div>
  </div>
</div>

原文地址：https://www.jb51.cc/jquery/527448.html