jQuery放大镜插件

(function($) {
    $.fn.magnifier = function(options){
        var options = $.extend({
            bigWidth: 400,       //大图高度
            bigHeight: 400,      //大图高度
            offset: 10,          //大图与小图之间的偏移
            condition: true
        },options);
        return this.each(function(){
            var self = $(this);
            if(options.condition === true){
                self.mouseenter(function(){
                    var imageLeft = $(this).offset().left;        //图片距离左边距离
                    var imageTop = $(this).offset().top;          //图片距离上边距离
                  var imageWidth = $(this).outerWidth();        //图片宽度
                  var imageHeight = $(this).outerHeight();      //图片高度
                  var boxLeft = $(this).parent().offset().left; //外层容器距离左边距离
                  var boxTop = $(this).parent().offset().top;   //外层容器距离上边距离
                  var boxWidth = $(this).parent().width();      //外层容器宽度
                  var boxHeight = $(this).parent().height();    //外层容器高度
                    var bigImage = $(this).attr("rel");           //获取大图链接
                    $("#bigDiv").remove();                        //开头清除大图
                    $("#zoomDiv").remove();                       //开头清除放大镜
                    //生成大图及放大镜
                    $(document.body).append("<div id='bigDiv'><img class='bigImg' src='" + bigImage + "'/></div><div id='zoomDiv'></div>");
                    //赋值大图属性
                    $("#bigDiv").css({
                        top    : boxTop,
                        left   : boxLeft + boxWidth + options.offset,  //外层容器左边距离+外层容器宽度+偏移
                        width  : options.bigWidth,
                        height : options.bigHeight
                    });
                    $("#bigDiv").show(); //显示大图容器
                    $(document.body).mousemove(function(e) {
                        if(e.pageX < imageLeft || e.pageX > imageLeft + imageWidth || e.pageY < imageTop || e.pageY > imageTop + imageHeight) {
                            $(document.body).unbind("mousemove");
                            $("#zoomDiv").remove();
                            $("#bigDiv").remove();
                            return false;
                        }
                        var bigwidth  = $("#bigDiv").find(".bigImg").outerWidth();    //大图宽度
                        var bigheight = $("#bigDiv").find(".bigImg").outerHeight();   //大图高度
                        var scalex    = bigwidth / imageWidth;                        //大图宽度 / 小图宽度
                        var scaley    = bigheight / imageHeight;                      //大图高度 / 小图高度
                        //动态计算放大镜位置
                        var xpos = (e.pageX - $("#zoomDiv").width() / 2 < imageLeft) ? imageLeft : (e.pageX + $("#zoomDiv").width() / 2 > imageWidth + imageLeft) ? (imageWidth + imageLeft - $("#zoomDiv").width()) : (e.pageX - $("#zoomDiv").width() / 2);
                        var ypos = (e.pageY - $("#zoomDiv").height() / 2 < imageTop) ? imageTop : (e.pageY + $("#zoomDiv").height() / 2 > imageHeight + imageTop) ? (imageHeight + imageTop - $("#zoomDiv").height()) : (e.pageY - $("#zoomDiv").height() / 2);
                        //动态赋值放大镜属性
                        $("#zoomDiv").css({
                            top   : ypos,
                            left  : xpos,
                            width : options.bigWidth / scalex,
                            height: options.bigHeight / scaley
                        });
                        //动态计算大图位置
                        var xposs = e.pageX - $("#zoomDiv").width() / 2 - imageLeft;
                        var yposs = e.pageY - $("#zoomDiv").height() / 2 - imageTop;
                        //动态赋值大图scroll
                        $("#bigDiv").scrollLeft(xposs*scalex).scrollTop(yposs*scaley);
                    });
                });
            }
            else{
                self.mouseenter(function(){
                    $("#bigDiv").remove();
                    $("#zoomDiv").remove();
                });
            }
        });
    }
})(jQuery);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{vertical-align: top;}
            #box{margin: 100px auto;display: table;position: relative;height: 300px;border: 1px solid red;}
            #bigDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
            #zoomDiv{position:absolute;background:url("mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
        </style>
    </head>
    <body>
        <div id="box">
            <div style="display: table-cell; vertical-align: middle;">
                <img src="01_mid.jpg" rel="01.jpg" class="jqzoom2" />
            </div>
        </div>
        <script src="../jquery.min.js"></script>
        <script src="jqzoom.js"></script>
        <script>
            function tj(){
                if($(window).width()>=1000){
                    $(".jqzoom2").magnifier();
                }else{
                    $(".jqzoom2").magnifier({condition:false});
                }
            }
            tj();
            $(window).resize(function(){
                tj();
            });
        </script>
    </body>
</html>

根据项目需求，响应式的情况下是否调用放大镜，写的一个简易jQuery插件。