跳动的菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】跳动的菜单
作者:Dezai.CN / 发布于2013/9/25/ 705

	<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而想起Javascript2.用Jscript写ASP有没有先天性的不足？3.没有了。</div>
	<div id="board2">1.xhtml+css真的来了吗？2.Flash取代传统网站3.Flash何时才能连接数据库？</div>
	<div id="board3">1.程序员与小姐的10个相同。2.中国的程序员与中国的足球？</div>
	<div id="board4">1.二十一世纪最缺的是什么?人才
试试其它关键字
　跳动的菜单　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)