CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

这篇文章主要介绍了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法,设计javascript操作菜单的弹出与关闭的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下：

这里用CSS+JS实现点击文字后动画展开一个DIV层菜单，到期会自动关闭，是CSS结合JS实现的效果。

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>CSS+JS弹出DIV层</title> 
7. <script type="text/javascript"> 
8. var w = 0; 
9. var h = 0; 
10. var mout; 
11. function emotion(){ 
12. var oMenu = document.getElementById("menu"); 
13. if(w <= 50){ 
14. oMenu.style.display = "block"; 
15. fnLarge(); 
16. } 
17. else{ 
18. fnSmall(); 
19. } 
20. } 
21. function fnLarge(){ 
22. var oMenu = document.getElementById("menu"); 
23. if(w < 200){ 
24. w += 50; 
25. h += 25; 
26. oMenu.style.width = w+"px"; 
27. oMenu.style.height = h+"px"; 
28. window.setTimeout("fnLarge()",10); 
29. } 
30. } 
31. function fnSmall(){ 
32. var oMenu = document.getElementById("menu"); 
33. if(w > 0){ 
34. w -= 50; 
35. h -= 25; 
36. oMenu.style.width = w+"px"; 
37. oMenu.style.height = h+"px"; 
38. window.setTimeout("fnSmall()",5); 
39. } 
40. else{ 
41. oMenu.style.display = "none"; 
42. } 
43. } 
44. </script> 
45. <style type="text/css"> 
46. body{ 
47. text-align: center; 
48. } 
49. p{ 
50. cursor: pointer; 
51. margin: 0; 
52. padding: 0; 
53. font-size: 24px; 
54. display: inline; 
55. } 
56. div a:link, div a:visited{ 
57. color: #666; 
58. text-decoration: none; 
59. } 
60. div a:hover{ 
61. color: #FF6600; 
62. text-decoration: underline; 
63. } 
64. div{ 
65. border: 2px solid #666; 
66. background: #fff; 
67. margin: 5px auto; 
68. overflow: hidden; 
69. display: none; 
70. padding: 5px 10px; 
71. } 
72. ul,li{ 
73. margin: 0; 
74. padding: 0; 
75. } 
76. li{ 
77. list-style: none; 
78. width:70px; 
79. } 
80. li.title{ 
81. font-weight: bold; 
82. } 
83. </style> 
84. </head> 
85. <body> 
86. <p onclick="emotion();">点击这行文字试试!</p> 
87. <div id="menu" 
88. onmouseout="javascript:mout=setTimeout('fnSmall()',2111);" 
89. onMouseOver="javascript:clearTimeout(mout);"> 
90. <table border="0" cellspacing="0" cellpadding="0"> 
91. <tr> 
92. <td width="80" valign="top" align="left"> 
93. <ul> 
94. <li class="title">ASP</li> 
95. <li><a href="#" onclick="fnSmall();">新闻</a></li> 
96. <li><a href="#" onclick="fnSmall();">论坛</a></li> 
97. <li><a href="#" onclick="fnSmall();">CMS</a></li> 
98. <li></li> 
99. </ul></td> 
100. <td width="80" valign="top" align="left"> 
101. <ul> 
102. <li class="title">PHP</li> 
103. <li><a href="#" onclick="fnSmall();">文章</a></li> 
104. <li><a href="#" onclick="fnSmall();">聊天</a></li> 
105. <li><a href="#" onclick="fnSmall();">插件</a></li> 
106. <li><a href="#" onclick="fnSmall();">企业</a></li> 
107. </ul> 
108. </td> 
109. <td width="80" valign="top" align="left"> 
110. <ul> 
111. <li class="title">JSP</li> 
112. <li><a href="#" onclick="fnSmall();">AJAX</a></li> 
113. <li><a href="#" onclick="fnSmall();">JQUERY</a></li> 
114. <li><a href="#" onclick="fnSmall();">MYSQL</a></li> 
115. <li><a href="#" onclick="fnSmall();">JAVA</a></li> 
116. </ul> 
117. </td> 
118. </tr> 
119. </table> 
120. </div> 
121. </body> 
122. </html> 

希望本文所述对大家的javascript程序设计有所帮助。