jquery右下角自动弹出可关闭的广告层

jQuery实现右下角自动弹出可关闭的悬浮提示层特效。这种效果可以使用jQuery弹出层实现。有需要的小伙伴可以参考下。

右下角弹出层后，会在一定时间后自动隐藏。

html代码：

1. <!DOCTYPE HTML> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta charset="UTF-8"> 
5. <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> 
6. <script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script> 
7. <style type="text/css"> 
8. * { 
9. margin: 0px; 
10. padding: 0px; 
11. } 
12. a {color:black; 
13. } 
14. #keleyislide { 
15. width: 300px; 
16. height: 200px; 
17. border: 1px solid #000; 
18. position: fixed; 
19. bottom: 2px; 
20. right: 2px; 
21. display: none; 
22. background-color: White; 
23. z-index:9999; 
24. } 
25.  
26. #keleyislide a { 
27. position: absolute; 
28. top: 8px; 
29. right: 8px; 
30. font-size: 12px; 
31. text-decoration: none; 
32. color: Blue; 
33. } 
34.  
35. #keleyislide h2 { 
36. font-size: 24px; 
37. text-align: center; 
38. font-family: "微软雅黑"; 
39. } 
40.  
41. #reshow { 
42. position: fixed; 
43. right: 2px; 
44. bottom: 2px; 
45. font-size: 12px; 
46. display: none; 
47. background-color: White; 
48. cursor: pointer; 
49. border: 1px solid #000; 
50. } 
51. </style> 
52. </head> 
53.  
54. <body> 
55. <div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> 
56. <div style="background-color:Red; width:100%;height:150px;">欢迎</div> 
57. <div style="background-color:Yellow; width:100%;height:150px;"> 一定时间后弹出层会自动隐藏 
58. </div> 
59. <div style="background-color:Silver; width:100%;height:150px;">计划</div> 
60. <div style="background-color:Aqua; width:100%;height:150px;">aaaa</div> 
61. <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div> 
62. <div style="background-color:Green; width:100%;height:150px;">vevb.com</div> 
63. <div style="background-color:Blue; width:100%;height:150px;">bbbb</div> 
64. <div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div> 
65. <div style="background-color:Green; width:100%;height:150px;">randomvisit</div> 
66. <div style="background-color:Purple; width:100%;height:150px;">cccc</div> 
67. <div style="background-color:Green; width:100%;height:150px;">B</div> 
68. <div style="background-color:Lime; width:100%;height:150px;">myslider</div> 
69. <div style="background-color:Orange; width:100%;height:150px;">Jihua</div> 
70. <div id="reshow">你快回来</div> 
71. <div id="keleyislide"> 
72. <a href="javaScript:void(0)" id="close" target="_self">关闭</a> 
73. <span style=" line-height:50px;">右下角滑动弹出可重现层<br /></span> 
74. </div> 
75. <script type="text/javascript"> 
76. function Jihua_Cnblogs_Com() { $("#kel"+"eyislide").slideDown("slow"); $("#reshow").hide(); } 
77. function KeleyiAutoHide() { $("#ke"+"leyislide").slideUp("slow"); $("#reshow").show(); } 
78. $(document).ready(function () { 
79. setTimeout(function () { 
80. Jihua_Cnblogs_Com(); 
81. }, 1000) 
82. setTimeout(function () { KeleyiAutoHide(); },9000) 
83. $("#close").click(function () { 
84. KeleyiAutoHide(); 
85. }) 
86. $("#reshow").mouseover(function () { 
87. Jihua_Cnblogs_Com(); }) 
88. }) 
89. </script> 
90. </body> 
91. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。