经常看到网页右下角有滑动弹出的广告，这种效果可以使用jQuery弹出层实现。本实例使用jQuery实现右下角滑动弹出可关闭重现层。
完整代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6 <title>jquery右下角滑动弹出可关闭重现层 博客园 计划 教程</title> 7 <meta name="keywords" content="www.cnblogs.com/jihua"/> 8 <style type="text/css"> 9 *{ margin:0px; padding:0px;} 10 #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} 11 #jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;} 12 #jihuaslide h2{ font-size:24px; text-align:center;font-family:"微软雅黑";} 13 #reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; cursor:pointer;border:1px solid #000;} 14 </style> 15 </head> 16 17 <body> 18 <div style="background-color:Green; width:100%;height:150px;">jihua.cnblogs.com</div> 19 <div style="background-color:Red; width:100%;height:150px;">欢迎</div> 20 <div style="background-color:Yellow; width:100%;height:150px;">hi</div> 21 <div style="background-color:Silver; width:100%;height:150px;">计划</div> 22 <div style="background-color:Aqua; width:100%;height:150px;">博客园</div> 23 <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div> 24 <div style="background-color:Green; width:100%;height:150px;">cnblogs.com</div> 25 <div style="background-color:Blue; width:100%;height:150px;">cnblogs</div> 26 <div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div> 27 <div style="background-color:Green; width:100%;height:150px;">A</div> 28 <div style="background-color:Purple; width:100%;height:150px;">jihua.cnblogs.com</div> 29 <div style="background-color:Green; width:100%;height:150px;">B</div> 30 <div style="background-color:Lime; width:100%;height:150px;">hello</div> 31 <div style="background-color:Orange; width:100%;height:150px;">Jihua</div> 32 <div id="reshow">你快回来</div> 33 <div id="jihuaslide"> 34 <a href="javaScript:void(0)" id="close">关闭</a> 35 <span style=" line-height:50px;">右下角滑动弹出可重现层<br />jihua.cnblogs.com</span> 36 <h2>博客园 计划 教程</h2> 37 </div> 38 <script type="text/javascript"> 39 function Jihua_Cnblogs_Com() { $("#jihuaslide").slideDown("slow"); $("#reshow").hide(); } 40 $(document).ready(function () { 41 setTimeout(function () { 42 Jihua_Cnblogs_Com(); 43 }, 1000) 44 $("#close").click(function () { 45 $("#jihuaslide").slideUp("slow"); $("#reshow").show(); 46 }) 47 $("#reshow").mouseover(function () { 48 Jihua_Cnblogs_Com(); //jihua.cnblogs.com 49 }) 50 }) 51 </script> 52 </body> 53 </html>
实际效果请看本网页的右下角。 效果图：
你快回来
