水平滑行

  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. }
  17. </style>
  18. <script type="text/javascript">
  19. var i=-135
  20. var intHide
  21. var speed=3
  22. function showmenu()
  23. {
  24. clearInterval(intHide)
  25. intShow=setInterval("show()",10)
  26. }
  27. function hidemenu()
  28. {
  29. clearInterval(intShow)
  30. intHide=setInterval("hide()",10)
  31. }
  32. function show()
  33. {
  34. if (i<-12)
  35.     {
  36.     i=i+speed
  37.     document.getElementById('myMenu').style.left=i
  38.     }
  39. }
  40. function hide()
  41. {
  42. if (i>-135)
  43.     {
  44.     i=i-speed
  45.     document.getElementById('myMenu').style.left=i
  46.     }
  47. }
  48. </script>
  49. </head>
  50.  
  51. <body>
  52. <table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
  53. <tr><td class="menu"><a href="/index.html">HOME</a></td>
  54. <td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr>
  55. <tr><td class="menu"><a href="/asp/index.asp">ASP</a></td></tr>
  56. <tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr>
  57. <tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr>
  58. <tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr>
  59. </table>
  60.  
  61. <p>请把鼠标移动到 MENU，可以显示这个菜单。</p>
  62. <p>可以尝试修改脚本中的 "speed" 变量，来改变菜单的滑动速度。</p>
  63. </body>
  64. </html>