js实现顶部可折叠的菜单工具栏效果实例

这篇文章主要介绍了js实现顶部可折叠的菜单工具栏效果,可实现鼠标滑过菜单工具栏出现折叠与展开效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下

本文实例讲述了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. <title>可以折叠的菜单工具栏</title> 
6. <style> 
7. html,body{ 
8. margin:0; 
9. } 
10. body{ 
11. url(img.jpg) repeat-x; 
12. } 
13. ha{ 
14. margin:0 auto; 
15. } 
16. img{ 
17. border:none; 
18. } 
19. #fx_topToolbar{ 
20. position:relative;top:-76px;left:0; 
21. margin:0 auto;height:92px; 
22. background:#0C3E74; width:700px; 
23. text-align:center; 
24. } 
25. #fx_topToolbar .shell{ 
26. margin:0 auto;padding:13px 0; 
27. } 
28. #btn_offOn{ 
29. position:absolute;bottom:-8px; 
30. left:20px;height:24px; width:150px; 
31. background:url(img34.gif) no-repeat; 
32. } 
33. #btn_offOn a{ 
34. display:block;zoom:1;height:24px; 
35. position:relative;right:-16px; 
36. background:url(tip.gif) no-repeat 100% 0; 
37. } 
38. </style> 
39. <script> 
40. (JS={ 
41. $:function(o){return typeof o=="string"?document.getElementById(o):o}, 
42. on:function(o,type,fn){ 
43. o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false); 
44. return JS.on}, 
45. move:function(who,attr,val,s,fn){ 
46. var fm=parseInt(who.style[attr])||0; 
47. clearInterval(who['timer_'+attr]); 
48. var iFx=(function(form,to,s){ 
49. return function (){ 
50. return form+=Math[form<to?'ceil':'floor']((to-form)*(s||0.3))}; 
51. })(fm,val,s); 
52. who['timer_'+attr]=setInterval(function (){ 
53. var v=iFx(); 
54. who.style[attr]=v+'px'; 
55. if(v==val){ fn&&fn.call(who);clearInterval(who['timer_'+attr]);}; 
56. },18); 
57. } 
58. }).on(window,'load',function (){ 
59. var Q=JS.$('fx_topToolbar');Q.style.top='-74px'; 
60. JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0)}) 
61. (Q,'mouseout',function (){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)}) 
62. (Q,'mouseover',function (){clearTimeout(this.outTimer)}); 
63. }) 
64. </script> 
65. </head> 
66. <body> 
67. <div id="fx_topToolbar"> 
68. <div class="shell"> 
69. <a href="#" title=""> 
70. <img src="1.gif" width="231" height="58" alt="" /> 
71. </a> 
72. <a href="#" title=""> 
73. <img src="2.gif" width="231" height="58" alt="" /> 
74. </a> 
75. </div> 
76. <div id="btn_offOn"><a href="#" title=""></a></div> 
77. </div> 
78. </body> 
79. </html> 

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