基于jQuery弹出层的9种效果

来源：互联网发布：七桥问题算法编辑：程序博客网时间：2024/04/29 07:19
示例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：在弹出层容器上加上自定义的classnew 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)});    }}
0 0