jquery弹出层 jquery弹出层 jquery弹出层

  • W9_777888
    了解作者
  • 26.2KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 07:18
    上传日期
jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角
弹出层.rar
  • 弹出层
  • demo.html
    2KB
  • popup_layer.js
    5.9KB
  • core.css
    2KB
  • jquery.js
    55.9KB
  • index.html
    22KB
内容介绍
<!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=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>基于jQuery弹出层有9种效果-懒人建站</title> <meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" /> <meta name="description" content="懒人建站为您提供-HTML+CSS模板,JS广告代码,网页特效,导航菜单,焦点幻灯片代码,原创视频教程与网页模板和CSS技巧。" /> <link href="core.css" type="text/css" rel="stylesheet"/> <script src="jquery.js" type="text/javascript" language="javascript"></script> <script src="popup_layer.js" type="text/javascript" language="javascript"></script> <script language="javascript"> $(document).ready(function() { //示例1,默认弹出层 new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"}); //示例2,弹出层位置可偏移 new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2", offsets:{ x:102, y:-41 } }); //示例3,使用弹出层默认特效 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,然后在css定义即可 new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"}); //示例6,使用遮罩 new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true}); //示例7,使用不同的事件来触发 new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"}); //示例8,使用自定义事件 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)}); } } var aa=new PopupLayer({trigger:"#tan",popupBlk:"#tanchu",closeBtn:"#cl",useOverlay:true}); $("#login").click(function(){ aa.close(); }); }); </script> </head> <body> <h1>基于jQuery弹出层有9种效果</h1> <div id="emample1" class="example"> <div id="ele1" class="tigger">触发元素1</div><div class="description">示例1:默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID,其中关闭按钮为可选项。<br />new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});</div> <div class="clr"></div> <select> <option>ie6下能罩住我吗?</option> </select> <div id="blk1" class="blk" style="display:none;"> <div class="head"><div class="head-right"></div></div> <div class="main"> <h2>示例1,默认弹出层</h2> <a href="javascript:void(0)" id="close1" class="closeBtn" rel='nofollow' onclick='return false;'>关闭</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>项目1</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目2</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目3</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目4</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目5</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目6</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目7</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目8</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目9</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目10</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目11</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目12</a></li> </ul> </div> <div class="foot"><div class="foot-right"></div></div> </div> </div> <div id="emample2" class="example"> <div id="ele2" class="tigger">触发元素2</div><div class="description">示例2:参数offsets可设置弹出层位置偏移量,让弹出层的位置随心所欲<br />new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});</div> <div class="clr"></div> <select> <option>ie6下能罩住我吗?</option> </select> <div id="blk2" class="blk" style="display:none;"> <div class="head"><div class="head-right"></div></div> <div class="main"> <h2>示例2,弹出层位置可偏移</h2> <a href="javascript:void(0)" id="close2" class="closeBtn" rel='nofollow' onclick='return false;'>关闭</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>项目1</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目2</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目3</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目4</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目5</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目6</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目7</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目8</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目9</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目10</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目11</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目12</a></li> </ul> </div> <div class="foot"><div class="foot-right"></div></div> </div> </div> <div id="emample3" class="example"> <div id="ele3" class="tigger">触发元素3</div><div class="description">示例3:useFx设置为true即可使用弹出层默认特效<br />new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});</div> <div class="clr"></div> <select> <option>ie6下能罩住我吗?</option> </select> <div id="blk3" class="blk" style="display:none;"> <div class="head"><div class="head-right"></div></div> <div class="main"> <h2>示例3,使用弹出层特效</h2> <a href="javascript:void(0)" id="close3" class="closeBtn" rel='nofollow' onclick='return false;'>关闭</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>项目1</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目2</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目3</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目4</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目5</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目6</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目7</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目8</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目9</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目10</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>项目11</a></li>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询