JavaScript菜单抖动

Sword Wang -

挖出了一些很怀念的代码。

这是一段我最早写的JS代码，大概时间是2008年中期的事了，实现的是一个菜单抖动的效果。看看这些代码，总是能回想起刚开始写JS时的兴奋之情。

DEMO

<html>
<head>
<title>test</title>
</pre>
<pre lang="css" line="4">
<style type="text/css">
	#wrapper{
		position:relative;
		width:720px;
		height:500px;
		left:50%;
		margin-left:-360px;
		border:solid black 1px;
	}
	#d1,#d2,#d3,#d4,#d5,#d6{
		position:absolute;
		border:1px black solid;
		margin-left:0;
		margin-right:auto;
		width:100px;
		text-align:center;
	}
	#d1{
		margin:5px;
	}
	#d2{
		top:20px;
		margin:10px 0 0 5px;
	}
	#d3{
		top:40px;
		margin:15px 0 0 5px;
	}
	#d4{
		top:60px;
		margin:20px 0 0 5px;
	}
	#d5{
		top:80px;
		margin:25px 0 0 5px;
	}
	#d6{
		top:100px;
		margin:30px 0 0 5px;
	}
	#content{
		position:absolute;
		border:1px solid black;
		width:605px;
		height:490px;
		left:110px;
		top:5px;
	}
	.contents{
		padding:10px;
		display:none;
	}
	#content1{
		display:block;
	}
</style>
</pre>
<pre lang="javascript" line="60">
<script type="text/javascript">
	var currunt=0
	function dis(menu_number){
		currunt=menu_number;
		width=30;
		speed=5;
		positionX=0;
		preSpeed=0;
		flag=1;
		document.getElementById("content"+menu_number).style.display="block";
		hidRest(menu_number);
	}
	function hidRest(menu_clicked){
		var MENU_LENGTH=6;
		for(i=1;i<=MENU_LENGTH;i++){
			if(i!=menu_clicked){
				document.getElementById("content"+i).style.display="none";
			}
		}
	}
	function shake(){
		if(flag==1){
			speed=1-speed*0.8
			positionX+=speed;
			positionX-=preSpeed;
			document.getElementById("d"+currunt).style.left=positionX
			if(Math.abs(speed)<1.0){
				document.getElementById("d"+currunt).style.left=0;
				flag=0;
			}
			preSpeed=speed;
			setTimeout("shake()",50)
		}
	}
</script>
</pre>

<pre lang="html" line="95">
</head>
<body>
	<div id="wrapper">
		<div id="d1" onmousedown="dis(1);shake()">Home</div>
		<div id="d2" onmousedown="dis(2);shake()">Products</div>
		<div id="d3" onmousedown="dis(3);shake()">Download</div>
		<div id="d4" onmousedown="dis(4);shake()">News</div>
		<div id="d5" onmousedown="dis(5);shake()">Support</div>
		<div id="d6" onmousedown="dis(6);shake()">About</div>
		<div id="content">
			<div class="contents"  id="content1">Home page:<br/>www.google.com</div>
			<div class="contents"  id="content2">Products list:
				<br/>AKG K701
				<br/>Sennheiser HD650
				<br/>beyerdynamic DT880
				<br/>Sony SA5000</div>
			<div class="contents"  id="content3">Download list:
				<br/>realtek_alc880_182_xp.zip
				<br/>Analog_soundmaxhd_drv510014310.rar
				<br/>RTL8168_565808142006.zip
				<br/>realtek_hd_205_xp.zip
				<br/>8-8_xp32_dd_67975.exe</div>
			<div class="contents"  id="content4">My first JS practice!</div>
			<div class="contents"  id="content5">Support Information:<br/>TEL:8888888</div>
			<div class="contents"  id="content6">JS demo 1.0 by iifksp</div>
		</div>
		
	</div>
</body>
</html>

这段代码被最初被我发贴在蓝色理想上，http://bbs.blueidea.com/viewthread.php?tid=2899292&highlight= ，版主也很宽松的给我打了一分，当时真是有一种这辈子就写JS的冲动。然而，时过境迁，不写JS已经很久很久了。