发布一款仿天猫产品放大镜JQuery插件

效果如下图：

 

  1、原图

 

2、放大镜效果：

 

 

插件源码如下：

/*
*
* JQUERY 简洁无极放大镜插件-zoomer
* Author:盛世游侠
* QQ:418873053
* Date:2013-11-22
*
*/
(function($) {
$.fn.zoomer = function(o){
    o = $.extend({
        pic:null,//原图img的容器
        leftImg:null,//原图img本身
        drag:null,//原图img选看区
        bigpic:null,//大图img的容器
        box:null,//大图img本身
        //img_zoom参数是指放大的倍数，取值范围从1到无穷大，可以取小数。
        //img_zoom参数决定了大图长和宽，以及大图显示区域的长和宽。该参数可以自己设置,也可以默认,如果大图与原图不是同一张图，建议默认。
        img_zoom:o.box.innerWidth()/o.leftImg.innerWidth()  
    }, o || {});

    o.pic.mouseout(function(){
        o.drag.hide();
        o.bigpic.hide();
    });
    //重置大图宽和高，使其与原图成一定比例
    o.box.width(o.leftImg.width()*o.img_zoom);
    o.box.height(o.leftImg.height()*o.img_zoom);
    //原图选看区移动事件函数
    o.pic.mousemove(function(e){
        o.drag.show();
        o.bigpic.show();
        
        //重置大图显示区长和宽与原图的选看区长和宽成一定比例
        o.bigpic.width(o.drag.width()*o.img_zoom);
        o.bigpic.height(o.drag.height()*o.img_zoom);
        
        //原图选看区的实时位置（原图选看区在HTML文档中的实时left和实时top）
        var drag_x=e.pageX - o.pic.offset().left-o.drag.innerWidth()/2;
        var drag_y=e.pageY -o.pic.offset().top-o.drag.innerHeight()/2;
        
        //使原图选看区的实时位置不超出原图的边界
        if (drag_x<0){drag_x=0;}
        if (drag_x>o.pic.width()-o.drag.width()) {drag_x=o.pic.width()-o.drag.width()};
        if (drag_y<0){drag_y=0;}
        if (drag_y>o.pic.height()-o.drag.height()) {drag_y=o.pic.height()-o.drag.height()};
        
        //实时设置原图选看区在原图中的位置,这里将jQuery对象转换为了Dom对象然后赋值，所以需要注意drag.style.left要有‘px’单位。
        o.drag.get(0).style.left=drag_x+'px';
        o.drag.get(0).style.top=drag_y+'px';
        
        //实时设置大图在大图显示区域中的卷动值scrollLeft和scrollTop
        o.bigpic.scrollLeft(drag_x*o.img_zoom);
        o.bigpic.scrollTop(drag_y*o.img_zoom);    
    });
};
})(jQuery);

 

配套的html代码如下：

 

    <div class="showimg">
        <div id="bigimg" class="bigimg">
            <a href="images/upload/p2_01.gif"><img src="images/upload/p2_01.gif" id="leftImg" title="bigimg" /></a>
            <div id="drag"><!--放大镜图标--></div>
        </div>
    
        <div class="bigpic" id="bigpic"><img id='box'src="images/upload/p2_01.gif"></div>
        
        <div class="litimg">
        <a class="hover_a" href="#"><span><b></b></span><img src="images/upload/p2_01.gif" /><u></u></a>
        <a href="#"><span><b></b></span><img src="images/upload/p19_04.gif" /><u></u></a>
        <a href="#"><span><b></b></span><img src="images/upload/index_17.jpg" /><u></u></a>
        </div>
    </div>

 

配套的插件调用代码：

 

<script type="text/javascript">
/*初始化插件*/
$().zoomer({
            pic:$('#bigimg'),
            bigpic:$('#bigpic'),
            box:$('#box'),
            drag:$('#drag'),
            leftImg:$('#leftImg')
});    
</script>

 

然后我们给它加上一个点击小图切换对应大图的功能：

 

<script type="text/javascript">

/*点击小图片切换大图片*/
$(function(){
    $('.litimg a').click(function(){
        var litsrc = $(this).children('img').attr('src');
        $('.showimg #bigimg #leftImg').attr('src',litsrc);
        $('.showimg .bigpic #box').attr('src',litsrc);
    });
});
</script>