点击水平滑行

  1. <html>
  2. <head>
  3. <style>
  4. body{font-family:arial;}
  5. a{color:black;text-decoration:none;font:bold}
  6. a:hover{color:#606060}
  7. td.menu{background:lightblue}
  8.  
  9. table.nav
  10. {
  11. background:black;
  12. position:relative;
  13. font: bold 80% arial;
  14. top:0px;
  15. left:-135px;
  16. margin-left:3px;
  17. }
  18. </style>
  19. <script type="text/javascript">
  20. var i=-135
  21. var c=0
  22. var intHide
  23. var speed=3
  24. function show_hide_menu()
  25. {
  26. if (c==0)
  27.     {
  28.     c=1
  29.     clearInterval(intHide)
  30.     intShow=setInterval("show()",10)
  31.     }
  32. else
  33.     {
  34.     c=0
  35.     clearInterval(intShow)
  36.     intHide=setInterval("hide()",10)
  37.     }
  38. }
  39. function show()
  40. {
  41. if (i<-12)
  42.     {
  43.     i=i+speed
  44.     document.getElementById('myMenu').style.left=i
  45.     }
  46. }
  47. function hide()
  48. {
  49. if (i>-135)
  50.     {
  51.     i=i-speed
  52.     document.getElementById('myMenu').style.left=i
  53.     }
  54. }
  55. </script>
  56. </head>
  57.  
  58. <body>
  59. <table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
  60. <tr><td class="menu"><a href="/index.html">HOME</a></td>
  61. <td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr>
  62. <tr><td class="menu"><a href="/asp/index.asp">ASP</a></td></tr>
  63. <tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr>
  64. <tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr>
  65. <tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr>
  66. </table>
  67.  
  68. <p>请点击 MENU，来显示这个菜单。</p>
  69. <p>可以尝试修改脚本中的 "speed" 变量，来改变菜单的滑动速度。</p>
  70. </body>
  71. </html>