分享几款jquery弹出层特效

作者:sky 点击:318 评论:0 发布时间:周六, 04/19/2014 - 13:30 所属分类:表格图层

常用的几种jquery弹出层特效，用户点击链接后弹出提示层，这个弹出提示层带有关闭按钮显示，供用户选择使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" /> <title>站长特效 jquery弹出层特效站长特效网</title> <style type="text/css">  </style> <script type="text/javascript" src="/img/jquery_zzjs.js"></script> <script type="text/javascript"> var Pop = function(options){ this.isIE = (document.all) ? true : false; this.isIE6 = this.isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1); this.isIE6 ? this.position = "absolute" : this.position = "fixed"; this.SetOptions(options); this.mode = this.options.mode; this.zIndex = this.options.zIndex; this.left = this.options.left; this.right = this.options.right; this.top = this.options.top; this.bottom = this.options.bottom; this.oPop = $("#" + this.options.oPop); this.oPop.css({ position:this.position, "z-index":this.zIndex }); //页面载入时是否显示遮盖层 if(this.options.beCover){ this.Start(); this.Initialization(); this.FullScreen(this.heightDocument, this.widthDocument); } //是否添加浮动层收缩 if(!!this.options.idShrink) this.Shrink(this.options.idShrink); //欢迎来到站长特z效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 /*关闭、打开浮动层*/ if(this.options.idClose.length != 0) this.Close(this.options.idClose); !!this.options.idOpen ? this.Open(this.options.idOpen) : this.Start(); }; Pop.prototype = { SetOptions: function(options){ this.options = { /*浮动框相关属性*/ oPop: "idPop", //浮动框id zIndex: "999", //浮动框的z-index left: 0, //距离左边多少像素 right: 0, //距离右边多少像素 top: 0, //距离顶部多少像素 bottom: 0, //距离底部多少像素 mode: ["left", "top"], //浮动层默认定位左上 /*遮罩层相关属性*/ beCover: false, //页面载入时是否显示遮盖层 cover: false, //是否显示遮盖层(遮盖层显示的必须条件) zIndexCover: 888, //遮盖层的z-index colorCover: "#000", //遮盖层的背景颜色 opactiyCover: 0.5, //遮盖层的透明度 /*浮动框收缩相关属性*/ idShrink: null, //收缩按钮id minHeight: 0, //收缩后的高度 maxHeight: 0, //展开后的高度 classOne: null, //切换用的class classTwo: null, //切换用的class //欢迎来到站长特效z网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 /*关闭、打开浮动层相关属性*/ idOpen: null, //打开按钮 idClose: [] //关闭按钮 }; $.extend(this.options, options || {}); }, Initialization: function(){ this.widthPop = this.oPop.width(); this.heightPop = this.oPop.height(); this.heightDocument = $(document).height(); this.widthDocument = Math.min($(document).width(), $("body").width()); //避免ie6下加上滚动条的宽度 this.heightWindow = $(window).height(); this.widthWindow = $(window).width(); this.topScroll = $(window).scrollTop(); this.leftScroll = $(window).scrollLeft(); }, Start: function(){ switch(this.mode[0].toLowerCase()) { case "left": this.LeftRightLocation(); break; case "right": this.LeftRightLocation(); break; default: this.CenterLocation(); } }, //mark等于false为水平垂直居中定位 GetValue: function(mark){ if(this.oPop.css("display") == "none") return; //浮动层显示时才动态计算其坐标(解决一个效率问题) var level = this.mode[0].toLowerCase(), vertical = this.mode[1].toLowerCase(); this.Initialization(); if(mark){ if(!this.isIE6){ level == "left" ? this.oPop.css({ left: this.left }) : this.oPop.css({ right: this.right }); vertical == "top" ? this.oPop.css({ top: this.top }) : this.oPop.css({ bottom: this.bottom }); }else{ var x_final = level == "left" ? this.leftScroll + this.left : this.widthWindow + this.leftScroll - this.widthPop - this.right; var y_final = vertical == "top" ? this.topScroll + this.top : this.heightWindow + this.topScroll - this.heightPop - this.bottom; this.oPop.css({ top: y_final, left: x_final }); } }else{ if(!this.isIE6){ var x_final = parseInt((this.widthWindow - this.widthPop) / 2); var y_final = parseInt((this.heightWindow - this.heightPop) / 2); }else{ var x_final = (this.widthWindow - this.widthPop) / 2 + this.leftScroll; var y_final = (this.heightWindow - this.heightPop) / 2 + this.topScroll; } this.oPop.css({ top: y_final, left: x_final }); } //IE6在浮动层中添加iframe if(this.isIE6){ this.AddIframe(this.oPop, this.heightPop, this.widthPop); } }, LeftRightLocation: function(){ this.GetValue(true); var _this = this; $(window).bind("scroll."+this.options.oPop, function(){ _this.GetValue(true); }).bind("resize."+this.options.oPop, function(){ _this.GetValue(true); }) }, CenterLocation: function(){ this.GetValue(false); var _this = this; $(window).bind("scroll."+this.options.oPop, function(){ _this.GetValue(false); }).bind("resize."+this.options.oPop, function(){ _this.GetValue(false); if(_this.oPop.css("display") != "none") _this.FullScreen(_this.heightDocument, _this.widthDocument); }); }, FullScreen: function(oHeight, oWidth){ if(!this.options.cover) return; //遮盖层参数 this.zIndexCover = this.options.zIndexCover; this.colorCover = this.options.colorCover; this.opactiyCover = this.options.opactiyCover; //欢迎来到站长特z效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 if($("#popMask").length == 0) $("body").append("<div id=\"popMask\"></div>"); //ie6遮罩层定位absolute,非ie6遮罩层定位fixed if(this.isIE6){ $("#popMask").css({ position: "absolute", "z-index": this.zIndexCover, top: 0, left: 0, height: oHeight, width: oWidth, opacity: this.opactiyCover, background: this.colorCover }); //IE6在浮动层中添加iframe this.AddIframe($("#popMask"), oHeight, oWidth); }else{ $("#popMask").css({ position: "fixed", "z-index": this.zIndexCover, top: 0, left: 0, height: "100%", width: "100%", opacity: this.opactiyCover, background: this.colorCover }); } }, //IE6覆盖select控件 AddIframe: function(iElement, iHeight, iWidth){ iElement.append("<iframe></iframe>"); var oIframe = iElement.children("iframe"); oIframe.css({ position: "absolute", top: 0, left: 0, opacity: 0, "z-index": -1, height: iHeight, width: iWidth, border: 0 }); }, //浮动层收缩 Shrink: function(iShrink){ this.minHeight = this.options.minHeight; this.maxHeight = this.options.maxHeight; this.classOne = this.options.classOne; this.classTwo = this.options.classTwo; var _this = this; $("#" + iShrink).toggle( function(){ _this.oPop.height(_this.minHeight); $(this).removeClass(); $(this).addClass(_this.classOne); if(_this.isIE6) _this.GetValue(true); }, function(){ _this.oPop.height(_this.maxHeight); $(this).removeClass(); $(this).addClass(_this.classTwo); if(_this.isIE6) _this.GetValue(true); } ); }, Close: function(iClose){ var _this = this; $.each(iClose, function(index, name){ $("#" + name).click(function(){ _this.oPop.css({ display: "none" }); if(!!$("#popMask")[0]) { $("#popMask").remove(); } $(window).unbind("scroll."+_this.options.oPop); $(window).unbind("resize."+_this.options.oPop); }) }); }, Open: function(iOpen){ var _this = this; var oOpen = $("#" + iOpen); oOpen.click(function(){ _this.oPop.css({ display: "block" }); _this.Start(); //遮罩层初始化 _this.FullScreen(_this.heightDocument, _this.widthDocument); }); } };//欢迎来到站长z特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> <script type="text/javascript">  </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 需要加载js文件，请刷新页面后看效果！ <div class="con"> <br /> <br /> <h1>浮动层：4方向+水平垂直居中定位（支持遮罩效果）</h1> <h3 class="red">IE6下是用absolute模拟fixed定位，其他浏览器都是以fixed来定位。</h3> <h2>参数说明：</h2> <p><strong>========浮动框相关属性============</strong></p> <p>oPop：浮动框ID<span>（默认值：idPop）</span></p> <p>zIndex:浮动框的z-index<span>（默认值：999）</span></p> <p>left:距离左边多少像素<span>（默认值：0）</span></p> <p>right:距离右边多少像素<span>（默认值：0）</span></p> <p>top:距离顶部多少像素<span>（默认值：0）</span></p> <p>bottom:距离底部多少像素<span>（默认值：0）</span></p> <p>mode:浮动层默认定位左上<span>（默认值：["left", "top"]）</span></p> <br /> <p><strong>========遮罩层相关属性============</strong></p> <p>beCover:页面载入时是否显示遮盖层<span>（默认值：false）</span></p> <p>cover：是否显示遮盖层（遮盖层显示的必须条件）<span>（默认值：false）</span></p> <p>zIndexCover：遮盖层的z-index<span>（默认值：888）</span></p> <p>colorCover：遮盖层的背景颜色<span>（默认值："#000"）</span></p> <p>opactiyCover:遮盖层的透明度<span>（默认值：0.5）</span></p> <br /> <p><strong>========浮动框收缩相关属性============</strong></p> <p>idShrink:收缩按钮ID<span>（默认值：null）</span></p> <p>minHeight:收缩后的高度<span>（默认值：0）</span></p> <p>maxHeight:展开后的高度<span>（默认值：0）</span></p> <p>classOne:切换用的class<span>（默认值：null）</span></p> <p>classTwo:切换用的class<span>（默认值：null）</span></p> <p><strong>========关闭、打开浮动层相关属性============</strong></p> <p>idOpen:打开按钮ID<span>（默认值：null）</span></p> <p>idClose:关闭按钮ID（支持多关闭按钮）<span>（默认值：[]）</span></p> <br /> <h2>结构如下：</h2> <p class="red">浮动层的position类型已在脚本里面写好，用的时候只需定义浮动层的高、宽、是否显示（display）即可</p> <p> <div id="idPop"><br /> ........... <br /> </div><br /> </p> <br /> <h2>例一：左下</h2> <p><a href="#blank" id="open_a">打开</a></p> <p><a href="#blank" id="close_a">关闭</a></p> <br /><br /> <h2>例二：右下</h2> <p><a href="#blank" id="open_b">打开</a></p> <p><a href="#blank" id="close_b">关闭</a></p> <br /><br /> <h2>例三：左上</h2> <p><a href="#blank" id="open_c">打开</a></p> <p><a href="#blank" id="close_c">关闭</a></p> <br /><br /> <h2>例四：右上</h2> <p><a href="#blank" id="open_d">打开</a></p> <p><a href="#blank" id="close_d">关闭</a></p> <br /><br /> <h2>例五：中间</h2> <p><a href="#blank" id="open_e">打开</a></p> <p><a href="#blank" id="close_e">关闭</a></p> <br /><br /> <h2>例六：中间(刷新页面直接显示)</h2> <p><a href="#blank" id="open_f">打开</a></p> <p><a href="#blank" id="close_f">关闭</a></p> </div> <div class="pop" id="idPop_a" style="background:#D7006C"><a href="#blank" id="close_a_1">关闭</a></div> <div class="pop" id="idPop_b" style="background:#FF6900"><p><a href="#blank" id="shrink">收缩</a></p><a href="#blank" id="close_b_1">关闭</a></div> <div class="pop" id="idPop_c" style="background:#4FA600"><a href="#blank" id="close_c_1">关闭</a></div> <div class="pop" id="idPop_d" style="background:#007770"><a href="#blank" id="close_d_1">关闭</a></div> <div class="pop" id="idPop_e" style="background:#f00;"><a href="#blank" id="close_e_1">关闭</a></div> <div class="pop pop_a" id="idPop_f" style="background:#668;"><a href="#blank" id="close_f_1">关闭</a></div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: