模仿Flash AS效果的导航菜单

 

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 模仿Flash AS效果的导航菜单 </ title >
< style  type ="text/css" > ...
<!--
a:link,a:visited {...}{ text-decoration: none; color: #666666 }
a:hover {...}{ text-decoration: underline }
#hor1 {...}{
position:absolute;
left:320px;
top:20px;
width:220px;
height:20px;
z-index:1;
background-color: #999900;
}
#hor2 {...}{
position:absolute;
left:320px;
top:40px;
width:220px;
height:20px;
z-index:2;
background-color: #FFCC00;
}
#hor3 {...}{
position:absolute;
left:320px;
top:60px;
width:220px;
height:20px;
z-index:3;
background-color: #99CC00;
}
#board1 {...}{
position:absolute;
left:320px;
top:40px;
width:220px;
height:120px;
z-index:-100;
background-color: #333333;
visibility: hidden;
}
body,td,th {...}{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
body {...}{
background-color: #666666;
}
#board2 {...}{
position:absolute;
left:320px;
top:60px;
width:220px;
height:120px;
z-index:-90;
background-color: #333333;
visibility: hidden;
}
#board3 {...}{
position:absolute;
width:220px;
height:120px;
z-index:-80;
left: 320px;
top: 80px;
background-color: #333333;
visibility: hidden;
}
#hor4 {...}{
position:absolute;
left:320px;
top:80px;
width:220px;
height:20px;
z-index:4;
background-color: #99CCCC;
}
#board4 {...}{
position:absolute;
left:320px;
top:100px;
width:220px;
height:120px;
z-index:-70;
background-color: #333333;
visibility: hidden;
}

-->
</ style >
< script  type ="text/javascript" > ...
lastNo=0
function re(menu_no)...{
if(lastNo!=menu_no)...{
cur=menu_no+1
lastNo=menu_no
rest()
}else...{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest()...{
for(i=1;i<=4;i++)...{
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke()...{
if(act==1&&cur<100)...{
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++)...{
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5)...{
for(i=cur;i<=menu_num;i++)...{
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</ script >
</ head >
< body >
< div  id ="hor1"  onclick ="re(1);huke()" > News </ div >
< div  id ="hor2"  onclick ="re(2);huke()" > Populor </ div >
< div  id ="hor3"  onclick ="re(3);huke()" > Sports </ div >
< div  id ="hor4"  onclick ="re(4);huke()" > Woman </ div >
< div  id ="board1" > 1.由AS而想起Javascript < br  /> 2.用Jscript写ASP有没有先天性的不足？ < br  /> 3.没有了。 </ div >
< div  id ="board2" > 1.xhtml+css真的来了吗？ < br  /> 2.Flash取代传统网站 < br  /> 3.Flash何时才能连接数据库？ </ div >
< div  id ="board3" > 1.程序员与小姐的10个相同。 < br  /> 2.中国的程序员与中国的足球？ </ div >
< div  id ="board4" > 1.二十一世纪最缺的是什么?人才 < br  />
< a  href ="<a href=" http://www.webjx.com" target ="_blank" > http://www.webjx.com </ a > " target="_blank">www.webjx.com </ a ></ div >
</ body >
</ html >