管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

可以媲美Flash的JS导航菜单

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>媲美Flash的JS导航菜单</title> 
<style type="text/css"> 
 
</style> 
<STYLE type=text/css>.table1 { 
    BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid 
} 
.alp { 
    FILTER: Alpha(Opacity=0,FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=80, FinishY=80); BACKGROUND-COLOR: #99ccff 
} 
.maskl { 
    OVERFLOW: hidden 
} 
.submenu { 
    BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ffffff 1px solid 
} 
</STYLE>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%3E%20%0D%0Afunction%20subClose1()%7B%20%0D%0A%20%20%20%20if(sub2.style.pixelLeft%3E-26)%7B%20%0D%0A%20%20%20%20%20%20%20%20sub2.style.pixelLeft--%3B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout(%22subClose1()%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20sub2.style.pixelLeft%3D-26%3B%20%0D%0A%20%20%20%20%20%20%20%20subMenuShowing%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20hideM2()%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0AsubMenuShowing%3Dfalse%3B%20%0D%0Afunction%20subMenu1()%7B%20%0D%0A%20%20%20%20var%20obj%3Devent.srcElement%3B%20%0D%0A%20%20%20%20subMenuShowing%3Dtrue%3B%20%0D%0A%20%20%20%20sub2out()%3B%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20sub2out()%7B%20%0D%0A%20%20%20%20if(sub2.style.pixelLeft%3C2)%7B%20%0D%0A%20%20%20%20%20%20%20%20sub2.style.pixelLeft%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout(%22sub2out()%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0AcurSelect%3D0%3B%20%0D%0Afunction%20showMenu(mID)%7B%20%0D%0A%20%20%20%20var%20oMenu%3Deval(%22menu%22%2BmID)%3B%20%0D%0A%20%20%20%20var%20oCircle%3Deval(%22sl%22%2BmID)%3B%20%0D%0A%20%20%20%20oMenu.style.pixelTop%2B%3D10%3B%20%0D%0A%20%20%20%20if(oMenu.style.pixelTop%3CoCircle.style.pixelTop%2B6)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20oMenu.timeHandle%3DsetTimeout(%22showMenu(%22%2BmID%2B%22)%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20oMenu.style.pixelTop%3DoCircle.style.pixelTop%2B6%3B%20%0D%0A%7D%20%0D%0Afunction%20hideMenu(mID)%7B%20%0D%0A%20%20%20%20var%20oMenu%3Deval(%22menu%22%2BmID)%3B%20%0D%0A%20%20%20%20var%20oCircle%3Deval(%22sl%22%2BmID)%3B%20%0D%0A%20%20%20%20oMenu.style.pixelTop-%3D10%3B%20%0D%0A%20%20%20%20if(oMenu.style.pixelTop%3E-60)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20oMenu.timeHandle%3DsetTimeout(%22hideMenu(%22%2BmID%2B%22)%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20oMenu.style.pixelTop%3D-80%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20lightMv()%7B%20%0D%0A%20%20%20%20if(light.filters.Alpha.opacity%3C100)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20light.filters.Alpha.opacity%2B%3D5%3B%20%0D%0A%20%20%20%20%20%20%20%20light.timeHandle%3DsetTimeout(%22lightMv()%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20darkMv()%7B%20%0D%0A%20%20%20%20if(light.filters.Alpha.opacity%3E0)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20light.filters.Alpha.opacity-%3D5%3B%20%0D%0A%20%20%20%20%20%20%20%20light.timeHandle%3DsetTimeout(%22darkMv()%22%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20sfMv1()%7B%20%0D%0A%20%20%20%20sl1.style.pixelTop%2B%3Dsl1.mvStep%3B%20%0D%0A%20%20%20%20if%20((sl1.dx%2B%2B)%3E20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20sl1.mvStep%3D-sl1.mvStep%3B%20%0D%0A%20%20%20%20%20%20%20%20sl1.dx%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20sl1.speed%3DparseInt(Math.random(1)*60%2B1)%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20sl1.timeHandle%3DsetTimeout(%22sfMv1()%22%2Csl1.speed)%3B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Afunction%20sfMv2()%7B%20%0D%0A%20%20%20%20sl2.style.pixelTop%2B%3Dsl2.mvStep%3B%20%0D%0A%20%20%20%20if%20((sl2.dx%2B%2B)%3E20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20sl2.mvStep%3D-sl2.mvStep%3B%20%0D%0A%20%20%20%20%20%20%20%20sl2.dx%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20sl2.speed%3DparseInt(Math.random(1)*60%2B1)%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20sl2.timeHandle%3DsetTimeout(%22sfMv2()%22%2Csl2.speed)%3B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Afunction%20sfMv3()%7B%20%0D%0A%20%20%20%20sl3.style.pixelTop%2B%3Dsl3.mvStep%3B%20%0D%0A%20%20%20%20if%20((sl3.dx%2B%2B)%3E20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20sl3.mvStep%3D-sl3.mvStep%3B%20%0D%0A%20%20%20%20%20%20%20%20sl3.dx%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20sl3.speed%3DparseInt(Math.random(1)*60%2B1)%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20sl3.timeHandle%3DsetTimeout(%22sfMv3()%22%2Csl3.speed)%3B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20sfMv4()%7B%20%0D%0A%20%20%20%20sl4.style.pixelTop%2B%3Dsl4.mvStep%3B%20%0D%0A%20%20%20%20if%20((sl4.dx%2B%2B)%3E20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20sl4.mvStep%3D-sl4.mvStep%3B%20%0D%0A%20%20%20%20%20%20%20%20sl4.dx%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20sl4.speed%3DparseInt(Math.random(1)*60%2B1)%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20sl4.timeHandle%3DsetTimeout(%22sfMv4()%22%2Csl4.speed)%3B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Afunction%20stopAllMv()%7B%20%0D%0A%20%20%20%20clearTimeout(sl1.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(sl2.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(sl3.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(sl4.timeHandle)%3B%20%0D%0A%7D%20%0D%0Afunction%20startAllMv()%7B%20%0D%0A%20%20%20%20clearTimeout(light.timeHandle)%3B%20%0D%0A%20%20%20%20darkMv()%3B%20%0D%0A%20%20%20%20sfMv1()%3B%20%0D%0A%20%20%20%20sfMv2()%3B%20%0D%0A%20%20%20%20sfMv3()%3B%20%0D%0A%20%20%20%20sfMv4()%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20showM1()%7B%20%0D%0A%20%20%20%20if(!subMenuShowing)%7B%20%0D%0A%20%20%20%20stopAllMv()%3B%20%0D%0A%20%20%20%20light.style.pixelTop%3Dsl1.style.pixelTop-30%3B%20%0D%0A%20%20%20%20clearTimeout(light.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(menu1.timeHandle)%3B%20%0D%0A%20%20%20%20lightMv()%3B%20%0D%0A%20%20%20%20showMenu(1)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20showM2()%7B%20%0D%0A%20%20%20%20if(!subMenuShowing)%7B%20%0D%0A%20%20%20%20stopAllMv()%3B%20%0D%0A%20%20%20%20light.style.pixelTop%3Dsl2.style.pixelTop-30%3B%20%0D%0A%20%20%20%20clearTimeout(light.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(menu2.timeHandle)%3B%20%0D%0A%20%20%20%20lightMv()%3B%20%0D%0A%20%20%20%20showMenu(2)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20showM3()%7B%20%0D%0Aif(!subMenuShowing)%7B%20%0D%0A%20%20%20%20stopAllMv()%3B%20%0D%0A%20%20%20%20light.style.pixelTop%3Dsl3.style.pixelTop-30%3B%20%0D%0A%20%20%20%20clearTimeout(light.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(menu3.timeHandle)%3B%20%20%20%20%20%0D%0A%20%20%20%20lightMv()%3B%20%0D%0A%20%20%20%20showMenu(3)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20showM4()%7B%20%0D%0A%20%20%20%20if(!subMenuShowing)%7B%20%0D%0A%20%20%20%20stopAllMv()%3B%20%0D%0A%20%20%20%20light.style.pixelTop%3Dsl4.style.pixelTop-30%3B%20%0D%0A%20%20%20%20clearTimeout(light.timeHandle)%3B%20%0D%0A%20%20%20%20clearTimeout(menu4.timeHandle)%3B%20%0D%0A%20%20%20%20lightMv()%3B%20%0D%0A%20%20%20%20showMenu(4)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20hideM1()%7B%20%0D%0A%20%20%20%20if%20(!subMenuShowing)%7B%20%0D%0A%20%20%20%20startAllMv()%3B%20%0D%0A%20%20%20%20clearTimeout(menu1.timeHandle)%3B%20%0D%0A%20%20%20%20hideMenu(1)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20hideM2()%7B%20%0D%0A%20%20%20%20if%20(!subMenuShowing)%7B%20%0D%0A%20%20%20%20startAllMv()%3B%20%0D%0A%20%20%20%20clearTimeout(menu2.timeHandle)%3B%20%0D%0A%20%20%20%20hideMenu(2)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20hideM3()%7B%20%0D%0A%20%20%20%20if%20(!subMenuShowing)%7B%20%0D%0A%20%20%20%20startAllMv()%3B%20%0D%0A%20%20%20%20clearTimeout(menu3.timeHandle)%3B%20%0D%0A%20%20%20%20hideMenu(3)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20hideM4()%7B%20%0D%0A%20%20%20%20if%20(!subMenuShowing)%7B%20%0D%0A%20%20%20%20startAllMv()%3B%20%0D%0A%20%20%20%20clearTimeout(menu4.timeHandle)%3B%20%0D%0A%20%20%20%20hideMenu(4)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20init()%7B%20%0D%0A%20%20%20%20sl1.mvStep%3D1%3B%20%0D%0A%20%20%20%20sl1.dx%3D0%3B%20%0D%0A%20%20%20%20sl1.speed%3D50%3B%20%0D%0A%20%20%20%20sl2.mvStep%3D1%3B%20%0D%0A%20%20%20%20sl2.dx%3D0%3B%20%0D%0A%20%20%20%20sl2.speed%3D1%3B%20%0D%0A%20%20%20%20sl3.mvStep%3D1%3B%20%0D%0A%20%20%20%20sl3.dx%3D0%3B%20%0D%0A%20%20%20%20sl3.speed%3D10%3B%20%0D%0A%20%20%20%20sl4.mvStep%3D1%3B%20%0D%0A%20%20%20%20sl4.dx%3D0%3B%20%0D%0A%20%20%20%20sl4.speed%3D20%3B%20%0D%0A%20%20%20%20startAllMv()%3B%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2FSCRIPT%3E">

<META content="Microsoft FrontPage 6.0" name=GENERATOR></head>

<BODY text=#cccccc bgColor=#000000 leftMargin=0 topMargin=0 onload=init() marginheight="0" marginwidth="0"><DIV class=table1 id=Layer1  
style="Z-INDEX: 3; LEFT: 50px; WIDTH: 26px; POSITION: absolute; TOP: 0px; HEIGHT: 100%"> 
<DIV id=sl1 onmouseover=showM1()  
style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 40px; HEIGHT: 24px"  
onmouseout=hideM1()><IMG height=24 src="http://www.glzy8.com/jstest/images/200651104740731.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651104740731.GIF" width=24></DIV> 
<DIV id=sl2 onmouseover=showM2()  
style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 140px; HEIGHT: 24px"  
onclick=subMenu1() onmouseout=hideM2()><IMG height=24  
src="http://www.glzy8.com/jstest/images/200651104740731.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651104740731.GIF" width=24></DIV> 
<DIV id=sl3 onmouseover=showM3()  
style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 240px; HEIGHT: 24px"  
onmouseout=hideM3()><IMG height=24 src="http://www.glzy8.com/jstest/images/200651104740731.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651104740731.GIF" width=24></DIV> 
<DIV id=sl4 onmouseover=showM4()  
style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 340px; HEIGHT: 24px"  
onmouseout=hideM4()><IMG height=24 src="http://www.glzy8.com/jstest/images/200651104740731.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651104740731.GIF" width=24></DIV> 
<DIV class=alp id=light  
style="Z-INDEX: 2; LEFT: -26px; WIDTH: 80px; POSITION: absolute; TOP: 0px; HEIGHT: 80px"></DIV></DIV> 
<DIV  
style="Z-INDEX: 2; LEFT: -60px; WIDTH: 30px; POSITION: absolute; TOP: 0px; HEIGHT: 100px"> 
<DIV id=menu1  
style="Z-INDEX: 5; LEFT: 82px; WIDTH: 20px; POSITION: absolute; TOP: -80px; HEIGHT: 55px"><IMG  
height=62 src="http://www.glzy8.com/jstest/images/200651105053281.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651105053281.GIF" width=24></DIV> 
<DIV id=menu2  
style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG  
height=77 src="http://www.glzy8.com/jstest/images/200651105059286.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651105059286.GIF" width=24></DIV> 
<DIV id=menu3  
style="Z-INDEX: 5; LEFT: 82px; WIDTH: 22px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG  
height=77 src="http://www.glzy8.com/jstest/images/20065110515713.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F20065110515713.GIF" width=24></DIV> 
<DIV id=menu4  
style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 77px"><IMG  
height=77 src="http://www.glzy8.com/jstest/images/200651105110149.GIF" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjstest%2Fimages%2F200651105110149.GIF" width=24></DIV></DIV> 
<DIV class=maskl id=masksub  
style="Z-INDEX: 4; LEFT: 80px; WIDTH: 32px; POSITION: absolute; TOP: 0px; HEIGHT: 100%"> 
<DIV id=sub2  
style="Z-INDEX: 1; LEFT: -26px; WIDTH: 26px; POSITION: absolute; TOP: 137px; HEIGHT: 304px"> 
<table class=submenu height="100%" cellSpacing=2 cellPadding=0 width="100%"  
border=0> 
  <TBODY> 
  <TR> 
    <TD bgColor=#666699> </TD></TR> 
  <TR> 
    <TD bgColor=#666699> </TD></TR> 
  <TR> 
    <TD bgColor=#666699> </TD></TR> 
  <TR> 
    <TD bgColor=#666699 height=147> </TD></TR> 
  <TR> 
    <TD onmouseover="this.bgColor='#9999cc'" onmouseout="this.bgColor='#666699'"  
    bgColor=#666699 height=10> 
      <DIV style="CURSOR: hand" onclick=subClose1() align=center><B><FONT  
      color=#ffff00>B</B></DIV></TD></TR></TBODY></TABLE></DIV></DIV><center>

</center> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程