jquery右下角自动弹出可关闭的广告层
右下角弹出层后,会在一定时间后自动隐藏。
html代码:
<!DOCTYPEHTML> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metacharset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><basetarget="_blank"/> <scripttype="text/javascript"src="jquery/jquery-1.11.2.min.js"></script> <styletype="text/css"> *{ margin:0px; padding:0px; } a{color:black; } #keleyislide{ width:300px; height:200px; border:1pxsolid#000; position:fixed; bottom:2px; right:2px; display:none; background-color:White; z-index:9999; } #keleyislidea{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue; } #keleyislideh2{ font-size:24px; text-align:center; font-family:"微软雅黑"; } #reshow{ position:fixed; right:2px; bottom:2px; font-size:12px; display:none; background-color:White; cursor:pointer; border:1pxsolid#000; } </style> </head> <body> <divstyle="background-color:Green;width:100%;height:150px;">keleyi.com</div> <divstyle="background-color:Red;width:100%;height:150px;">欢迎</div> <divstyle="background-color:Yellow;width:100%;height:150px;">一定时间后弹出层会自动隐藏 </div> <divstyle="background-color:Silver;width:100%;height:150px;">计划</div> <divstyle="background-color:Aqua;width:100%;height:150px;">aaaa</div> <divstyle="background-color:Fuchsia;width:100%;height:150px;">jihua</div> <divstyle="background-color:Green;width:100%;height:150px;">jb51.net</div> <divstyle="background-color:Blue;width:100%;height:150px;">bbbb</div> <divstyle="background-color:Olive;width:100%;height:150px;">欢迎光临</div> <divstyle="background-color:Green;width:100%;height:150px;">randomvisit</div> <divstyle="background-color:Purple;width:100%;height:150px;">cccc</div> <divstyle="background-color:Green;width:100%;height:150px;">B</div> <divstyle="background-color:Lime;width:100%;height:150px;">myslider</div> <divstyle="background-color:Orange;width:100%;height:150px;">Jihua</div> <divid="reshow">你快回来</div> <divid="keleyislide"> <ahref="javaScript:void(0)"id="close"target="_self">关闭</a> <spanstyle="line-height:50px;">右下角滑动弹出可重现层<br/></span> </div> <scripttype="text/javascript"> functionJihua_Cnblogs_Com(){$("#kel"+"eyislide").slideDown("slow");$("#reshow").hide();} functionKeleyiAutoHide(){$("#ke"+"leyislide").slideUp("slow");$("#reshow").show();} $(document).ready(function(){ setTimeout(function(){ Jihua_Cnblogs_Com(); },1000) setTimeout(function(){KeleyiAutoHide();},9000) $("#close").click(function(){ KeleyiAutoHide(); }) $("#reshow").mouseover(function(){ Jihua_Cnblogs_Com();}) }) </script> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。