这是我之前写在新浪的一篇博客^_^.
之前看淘宝上面的商品图片，当鼠标放上去，会有一个据部放大的效果，类似于放大镜， 觉得效果不错，于是想动手做一个，但不知从何下手。上网看别人的代码，杂乱无章--可能是和我的编程习惯不同吧，便没耐心看下去。最新忽然闲了，强迫自己 静下心来，写出之前很多想写而未写的代码。
代码不是很多，但自己写的，思路清晰，明白了实现原理，以后就不用问度娘copy别人的代码了。
先上jQuery。
<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
再把所用到的css放上去吧——看别人的代码，在js中用到很多样式啊，ID啊什么的，不知所云，最后才发现，哦，原来css在后面，用一个不恰当的成语，本末倒置。换位思考，不想让看到此篇博文的人有云里雾里的感觉。
<link href="../js/zoomin.css" rel="stylesheet" type="text/css" />
里面没多写东西，就三两个样式。
1 .smalldiv { border: 1px solid #f00; width: 50px; height: 50px;position:absolute; } 2 .showoverlay { border-width:0; margin:0; padding:0; border-style:none; } 3 .bigdiv { border: 1px solid #f00; width: 200px; height: 200px; position: absolute; overflow:hidden; }
其中.showoverlay命名有点不太对，这个原本是从另一个遮罩层的样式表里直接拷贝过来的，也没修改，见谅。
.smalldiv和.bigdiv里面的width和height可以随意改动，放大镜总会等比例缩放，这里默认的是局部4倍放大。
上一个使用的示例
1 <div> 2 <img class="showoverlay" src="../images/Garfield/Garfield_04.jpg" /> 3 <img class="showoverlay" src="../images/Garfield/Garfield_05.jpg" /> 4 <img class="showoverlay" src="../images/Garfield/Garfield_06.jpg" /> 5 </div>
css类是关键，只需把CSS和js文件引用的页面中，想放大某个图片，为其添加class="showoverlay"即可。
最后上自己编写的局部放大的代码，包含在一个js文件里。
<script src="../js/zoomin.js" type="text/javascript"></script>
下面是具体的代码。
jquery代码
1 **************** 2 ** 制作--潘豹 3 ** 邮箱--panbao163.com@163.com 4 ** 扣扣--14441418 5 ** 欢迎转载使用和修改 6 **************** 7 8 $(function () { 9 10 var h = $(document).height(); 11 var w = $(document).width(); 12 $(window).resize(function () { 13 h = $(document).height(); 14 w = $(document).width(); 15 $(".bigdiv").remove(); 16 }); 17 $(".showoverlay").mouseout(function () { 18 $(".bigdiv").remove(); 19 $(".smalldiv").remove(); 20 }); 21 $(".showoverlay").bind("mousemove", function (e) { 22 var ths = $(this); 23 var xx = e.pageX; 24 var yy = e.pageY; 25 $("body").append("<div class='smalldiv'></div>"); 26 var sh = $(".smalldiv").height(); 27 var sw = $(".smalldiv").width(); 28 29 if (xx < ths.offset().left + sw / 2) { 30 if (yy < ths.offset().top + sh / 2) { 31 $(".smalldiv").css({ top: ths.offset().top, left: ths.offset().left }); 32 } 33 else if (yy > ths.offset().top + ths.height() - sh / 2) { 34 $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: ths.offset().left }); 35 } 36 else { 37 $(".smalldiv").css({ top: yy - sh / 2, left: ths.offset().left }); 38 } 39 } 40 else if (xx > ths.offset().left + ths.width() - sw / 2) { 41 if (yy < ths.offset().top + sh / 2) { 42 $(".smalldiv").css({ top: ths.offset().top, left: ths.offset().left + ths.width() - sw }); 43 } 44 else if (yy > ths.offset().top + ths.height() - sh / 2) { 45 $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: ths.offset().left + ths.width() - sw }); 46 } 47 else { 48 $(".smalldiv").css({ top: yy - sh / 2, left: ths.offset().left + ths.width() - sw }); 49 } 50 } 51 else { 52 if (yy < ths.offset().top + sh / 2) { 53 $(".smalldiv").css({ top: ths.offset().top, left: xx - sw / 2 }); 54 } 55 else if (yy > ths.offset().top + ths.height() - sh / 2) { 56 $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: xx - sw / 2 }); 57 } 58 else { 59 $(".smalldiv").css({ top: yy - sh / 2, left: xx - sw / 2 }); 60 } 61 } 62 $(".bigdiv").remove(); 63 $("body").append("<div class='bigdiv'></div>"); 64 var bh = $(".bigdiv").height(); 65 var bw = $(".bigdiv").width(); 66 $(".bigdiv").css({ top: ths.offset().top, left: ths.offset().left + ths.width() }); 67 $(".bigdiv").find("img").remove(); 68 var tempx = $(".smalldiv").offset().left - ths.offset().left; 69 var tempy = $(".smalldiv").offset().top - ths.offset().top; 70 $(".bigdiv").append("<img style='position:absolute;' src='" + ths.attr("src") + "'/>"); 71 $(".bigdiv").find("img").css({ top: -tempy * bh / sh, left: -tempx * bw / sw }); 72 $(".bigdiv").find("img").css({ height: ths.height() * bh / sh, ths.width() * bw / sw }); 73 }); 74 });