JS伸缩效果

发表于 2011年03月10日
jQuery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<style>
			
			.b{
				position:absolute;
				top:130px;
				left:250px;
				height:100px;
				background-color:#666;
			}
		</style>
		
		<div class="b" id="layout" style="width:30px;" onmouseover="showdiv('layout')" onmouseout="closediv('layout')" >
			<table>
				<tr>
					<td>111</td>
				</tr>
			</table>
		</div>
		<script>
			var a2,a1;
			var dir = 0;
			function showdiv(id){
				if(a2){
					clearInterval(a2);
				}
				var obj = document.getElementById(id);
				obj.style.display = "block";
				
				var changw = function(){
					var obj_w = parseInt(obj.style.width);
					if(obj_w<=300){
						obj.style.width = obj_w + Math.ceil((300-obj_w)/10) + "px";
					}
					else{
						if(a1){
							clearInterval(a1);
						}
					}
				}
				a1 = setInterval(changw,10);
				if(dir>0){
					clearInterval(a2);
				}
			}
			function closediv(id){
				if(a1){
					clearInterval(a1);
				}		
				dir ++;
				var obj = document.getElementById(id);
				var closed = function(){
					var obj_w = parseInt(obj.style.width);
					clearInterval(a1);
					if(obj_w>30){
						obj.style.width = obj_w - Math.ceil(obj_w/10) +"px";
					}
					else{
						if(a2){
							clearInterval(a2);
						}	
					}
				}
				a2 = setInterval(closed,1);
			}
			function stopdiv(){
				clearInterval(a1);
				clearInterval(a2);
				obj.style.width = "300px";
			}
		</script>
	</body>
</html>