jQuery放大鏡插件 -开发者知识库

jQuery放大鏡插件 -开发者知识库,第1张

(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);

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复