基於jQuery彈出層的9種效果

原創

2020-02-22 00:28

示例1：默認彈出層,只須傳入觸發元素、彈出層、關閉按鈕的jquery對象或#ID，其中關閉按鈕爲可選項。
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});

示例2：參數offsets可設置彈出層位置偏移量，讓彈出層的位置隨心所欲
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});

示例3：useFx設置爲true即可使用彈出層默認特效
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});

示例4：使用彈出層特效，重載特效函數來完成自定義特效
var t4 = new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});
t4.doEffects = function(way){
     way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
}

示例5：在彈出層容器上加上自定義的class
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});

示例6：useOverlay設置爲true即可在彈出層後使用遮罩
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});

示例7：eventType爲事件觸發類型，表示以何種方式觸發彈出層
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});

示例8：自定義事件，onBeforeStart在觸發彈出前做一些自己想做的事。
這裏我做的事是：在dom加載完成後，延遲5秒才能使用彈出層。（提示：可refresh頁面看效果）
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",
     onBeforeStart:function(){
         this.isDoPopup = false;
         setTimeout(function(){this.isDoPopup = true}.binding(this),5000);
     }
});

示例9：綜合效果
var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",
useOverlay:true,useFx:true,offsets:{x:0,y:-41}});
t9.doEffects = function(way){
    if(way == "open"){
        this.popupLayer.css({opacity:0.3}).show(400,function(){
            this.popupLayer.animate({
                left:($(document).width() - this.popupLayer.width())/2,
                top:(document.documentElement.clientHeight -
                    this.popupLayer.height())/2 + $(document).scrollTop(),
                opacity:0.8
            },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
        }.binding(this));
    }
    else{
        this.popupLayer.animate({
            left:this.trigger.offset().left,
            top:this.trigger.offset().top,
            opacity:0.1
        },{duration:500,complete:function(){
            this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
    }
}