基于jQuery弹出层有9种效果
来源:互联网 发布:小甲鱼python好吗 编辑:程序博客网 时间:2024/05/01 10:02
基于jQuery弹出层有9种效果
触发元素1
示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
触发元素2
示例2:参数offsets可设置弹出层位置偏移量,让弹出层的位置随心所欲
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});
new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});
触发元素3
示例3:useFx设置为true即可使用弹出层默认特效
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});
new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});
触发元素4
示例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");
}
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
示例5:在弹出层容器上加上自定义的class
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});
new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});
触发元素6
示例6:useOverlay设置为true即可在弹出层后使用遮罩
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
触发元素7
示例7:eventType为事件触发类型,表示以何种方式触发弹出层
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
触发元素8
示例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);
}
});
这里我做的事是:在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
示例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)});
}
}
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
- 基于jQuery弹出层有9种效果
- 基于jQuery弹出层有9种效果
- 基于jQuery弹出层的9种效果
- jQuery弹出层效果,有关闭按钮
- JQUERY弹出层 三种弹出效果
- Jquery弹出层效果
- 基于jquery实现的弹出层效果实现!
- 基于jquery实现的弹出层效果实现!
- jquery 实现弹出层效果
- JQuery弹出层效果制作
- JQuery弹出层效果制作
- jquery+div 弹出层效果
- 3,JQuery几种常用的弹出层效果
- jQuery 弹出层效果简化版
- 使用jquery实现弹出层效果
- jQuery实现很炫很酷的弹出层效果
- jQuery实现很炫很酷的弹出层效果
- jQuery,仿人人网弹出层效果
- ASM读写字节码
- POJ2371Questions and answers
- matlab 直方图 整理
- SQL总结(一)基本查询
- hdu 1232简单并查集
- 基于jQuery弹出层有9种效果
- 01_translation_avtivity生命周期04
- nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型
- oracle 连接字符串(拼接字段)
- UIPickerView控件
- C#控制管理VisualSVN Server
- 大流量如何保存文章阅读数
- android 4.4中broadcast 注册机制变化
- RAC配置DG,单向不切换