有谁知道这样的滑动的菜单怎么做?

我看到有的论坛上功能菜单隐藏在左边,只看到一条题目,鼠标放上去后滑出来。鼠标离开时又滑回去。
---------------------------------------------------------------

1.将下面的代码复制到

  1<head>
  2<style>   
  3<!--   
  4#slidemenubar, #slidemenubar2{   
  5position:absolute;   
  6left:-155px;   
  7width:160px;   
  8top:170px;   
  9border:1.5px solid green;   
 10background-color:lightyellow;   
 11layer-background-color:lightyellow;   
 12font:bold 12px Verdana;   
 13line-height:20px;   
 14}   
 15\-->   
 16</style>   
 17  
 182。将下面的代码复制到 <body>
 19<script language="JavaScript1.2">   
 20  
 21/*   
 22Sliding Menu Bar Script-   
 23?Dynamic Drive (www.dynamicdrive.com)   
 24For full source code, installation instructions,   
 25100's more DHTML scripts, and Terms Of   
 26Use, visit dynamicdrive.com   
 27*/   
 28  
 29if (document.all)   
 30document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')   
 31</script>
 32<layer id="slidemenubar" onmouseout="draw()" onmouseover="pull()">
 33<script language="JavaScript1.2">   
 34var sitems=new Array()   
 35var sitemlinks=new Array()   
 36  
 37//extend or shorten this list   
 38sitems[0]="Home"   
 39sitems[1]="Take our survey!"   
 40sitems[2]="Menus And Navigation"   
 41sitems[3]="Document Effects"   
 42sitems[4]="Scrollers"   
 43sitems[5]="Image Effects"   
 44sitems[6]="Links And Buttons"   
 45sitems[7]="Dynamic Clocks & Dates"   
 46sitems[8]="Text Animations"   
 47sitems[9]="Browser Window"   
 48sitems[10]="User System Information"   
 49sitems[11]="Cascading Style Sheets"   
 50sitems[12]="Other"   
 51  
 52  
 53//These are the links pertaining to the above text.   
 54sitemlinks[0]="../test.htm"   
 55sitemlinks[1]=".."   
 56sitemlinks[2]="../dynamicindex1/index.html"   
 57sitemlinks[3]="../dynamicindex3/index.html"   
 58sitemlinks[4]="../dynamicindex2/index.html"   
 59sitemlinks[5]="../dynamicindex4/index.html"   
 60sitemlinks[6]="../dynamicindex5/index.html"   
 61sitemlinks[7]="../dynamicindex6/index.html"   
 62sitemlinks[8]="../dynamicindex10/index.html"   
 63sitemlinks[9]="../dynamicindex8/index.html"   
 64sitemlinks[10]="../dynamicindex9/index.html"   
 65sitemlinks[11]="../dynamicindex7/index.html"   
 66sitemlinks[12]="../dynamicindex11/index.html"   
 67  
 68for (i=0;i<=sitems.length-1;i++)   
 69document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')   
 70</script>
 71</layer><script language="JavaScript1.2">   
 72function regenerate(){   
 73window.location.reload()   
 74}   
 75function regenerate2(){   
 76if (document.layers)   
 77setTimeout("window.onresize=regenerate",400)   
 78}   
 79window.onload=regenerate2   
 80if (document.all){   
 81document.write('</div>')   
 82themenu=document.all.slidemenubar2.style   
 83rightboundary=0   
 84leftboundary=-150   
 85}   
 86else{   
 87themenu=document.layers.slidemenubar   
 88rightboundary=150   
 89leftboundary=10   
 90}   
 91function pull(){   
 92if (window.drawit)   
 93clearInterval(drawit)   
 94pullit=setInterval("pullengine()",50)   
 95}   
 96function draw(){   
 97clearInterval(pullit)   
 98drawit=setInterval("drawengine()",50)   
 99}   
100function pullengine(){   
101if (document.all&&themenu.pixelLeft<rightboundary)   
102themenu.pixelLeft+=5   
103else if(document.layers&&themenu.left<rightboundary)   
104themenu.left+=5   
105else if (window.pullit)   
106clearInterval(pullit)   
107}   
108function drawengine(){   
109if (document.all&&themenu.pixelLeft>leftboundary)   
110themenu.pixelLeft-=5   
111else if(document.layers&&themenu.left>leftboundary)   
112themenu.left-=5   
113else if (window.drawit)   
114clearInterval(drawit)   
115}   
116</script>   
117\---------------------------------------------------------------   
118  
119http://lucky.myrice.com/javascriptexam/Scroll_down_screen.htm   
120看原代码即可   
121\---------------------------------------------------------------   
122  
123http://www.1000script.com//script/go.asp?id=96</body></head>
Published At
Categories with Web编程
comments powered by Disqus