当页面载人的时候正常显示缩略图，然后当鼠标经过缩略图的时候AJAX加载原大图。
使用jQuery的e.pageX方法提取鼠标经过图片时的坐标，再将遮罩的绝对定位时的坐标值赋值，同时改变大图的坐标值，达到显示位置的准确性。
当鼠标离开小图区域的时候隐藏遮罩。
css:
js:
/** @param* @arrange (512.笔记) 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>
html:
/** @param* @arrange (512.笔记) 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>
<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>
