使用jQuery编写的一个图片局部放大效果

这是我之前写在新浪的一篇博客^_^.

之前看淘宝上面的商品图片，当鼠标放上去，会有一个据部放大的效果，类似于放大镜， 觉得效果不错，于是想动手做一个，但不知从何下手。上网看别人的代码，杂乱无章--可能是和我的编程习惯不同吧，便没耐心看下去。最新忽然闲了，强迫自己 静下心来，写出之前很多想写而未写的代码。

代码不是很多，但自己写的，思路清晰，明白了实现原理，以后就不用问度娘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" />

里面没多写东西，就三两个样式。

.smalldiv { border: 1px solid #f00; width: 50px; height: 50px;position:absolute; }
.showoverlay { border-width:0; margin:0; padding:0; border-style:none; }
.bigdiv { border: 1px solid #f00; width: 200px; height: 200px; position: absolute; overflow:hidden; }

其中.showoverlay命名有点不太对，这个原本是从另一个遮罩层的样式表里直接拷贝过来的，也没修改，见谅。

.smalldiv和.bigdiv里面的width和height可以随意改动，放大镜总会等比例缩放，这里默认的是局部4倍放大。

上一个使用的示例

    <div>
        <img class="showoverlay" src="../images/Garfield/Garfield_04.jpg" />
        <img class="showoverlay" src="../images/Garfield/Garfield_05.jpg" />
        <img class="showoverlay" src="../images/Garfield/Garfield_06.jpg" />
    </div>

css类是关键，只需把CSS和js文件引用的页面中，想放大某个图片，为其添加class="showoverlay"即可。

最后上自己编写的局部放大的代码，包含在一个js文件里。

<script src="../js/zoomin.js" type="text/javascript"></script>

下面是具体的代码。

****************
** 制作--潘豹
** 邮箱--panbao163.com@163.com
** 扣扣--14441418
** 欢迎转载使用和修改
****************

$(function () {

    var h = $(document).height();
    var w = $(document).width();
    $(window).resize(function () {
        h = $(document).height();
        w = $(document).width();
        $(".bigdiv").remove();
    });
    $(".showoverlay").mouseout(function () {
        $(".bigdiv").remove();
        $(".smalldiv").remove();
    });
    $(".showoverlay").bind("mousemove", function (e) {
        var ths = $(this);
        var xx = e.pageX;
        var yy = e.pageY;
        $("body").append("<div class='smalldiv'></div>");
        var sh = $(".smalldiv").height();
        var sw = $(".smalldiv").width();
       
        if (xx < ths.offset().left + sw / 2) {
            if (yy < ths.offset().top + sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top, left: ths.offset().left });
            }
            else if (yy > ths.offset().top + ths.height() - sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: ths.offset().left });
            }
            else {
                $(".smalldiv").css({ top: yy - sh / 2, left: ths.offset().left });
            }
        }
        else if (xx > ths.offset().left + ths.width() - sw / 2) {
            if (yy < ths.offset().top + sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top, left: ths.offset().left + ths.width() - sw });
            }
            else if (yy > ths.offset().top + ths.height() - sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: ths.offset().left + ths.width() - sw });
            }
            else {
                $(".smalldiv").css({ top: yy - sh / 2, left: ths.offset().left + ths.width() - sw });
            }
        }
        else {
            if (yy < ths.offset().top + sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top, left: xx - sw / 2 });
            }
            else if (yy > ths.offset().top + ths.height() - sh / 2) {
                $(".smalldiv").css({ top: ths.offset().top + ths.height() - sh, left: xx - sw / 2 });
            }
            else {
                $(".smalldiv").css({ top: yy - sh / 2, left: xx - sw / 2 });
            }
        }
        $(".bigdiv").remove();
        $("body").append("<div class='bigdiv'></div>");
        var bh = $(".bigdiv").height();
        var bw = $(".bigdiv").width();
        $(".bigdiv").css({ top: ths.offset().top, left: ths.offset().left + ths.width() });
        $(".bigdiv").find("img").remove();
        var tempx = $(".smalldiv").offset().left - ths.offset().left;
        var tempy = $(".smalldiv").offset().top - ths.offset().top;
        $(".bigdiv").append("<img style='position:absolute;' src='" + ths.attr("src") + "'/>");
        $(".bigdiv").find("img").css({ top: -tempy * bh / sh, left: -tempx * bw / sw });
        $(".bigdiv").find("img").css({ height: ths.height() * bh / sh,  ths.width() * bw / sw });
    });
});