基于jQuery弹出层的9种效果
2015-08-10 09:47
645 查看
示例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(){ 4000 this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)}); } }
相关文章推荐
- jQuery源码的几篇文章
- jQuery: 图片不完全按比例自动缩小
- jQuery+css3实现Ajax点击后动态删除功能的方法
- jQuery图片上传前先在本地预览
- jQuery 判断所有图片加载完成
- jquery ui dialog autofocus 去掉默认第一个元素获取焦点
- jquery中,某些写法后来更新导致版本不支持的替代方法
- jQuery效果之滑动
- jQuery插件 -- UI插件Tabs Widget 1.10
- jQuery+css3实现Ajax点击后动态删除功能的方法
- jQuery 判断图片是否加载完成方法汇总
- jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
- jquery实现鼠标滑过后动态图片提示效果实例
- jQuery中$(function() {});问题详解
- jQuery实现购物车表单自动结算效果实例
- jQuery基于ajax实现带动画效果无刷新柱状图投票代码
- jQuery实现的图文高亮滚动切换特效实例
- jQuery解决input超多的表单提交
- jquery实现表单输入时提示文字滑动向上效果
- jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法