<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
<!--
#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  />
2.当代女人的男性化与男人的女性化。 </ div >
</ body >
</ html >