js左右大小变化

点左边左边变大。点右边右边大左边小

 <style type="text/css">
			*{
				margin:0px auto;
				padding:0px;
				}
        	#wai{
				width:100%;
				height:500px;
				}
			#nei_1{
				
				height:500px;
				background-color:blue;
				float:left;
				}
			#nei_2{
				
				height:500px;
				background-color:#6C0;
				float:left;
				}
			#anniu{
				width:50px;
				height:50px;
				background-color:red;
				position:absolute;
				top:225px;
				}
			
        </style>
    </head>
    
    <body>
    	<div id="wai">
        	<div id="nei_1" style="width:200px;" onclick="Hua()"></div>
            <div id="nei_2" style="width:700px;" onclick="Hui()"></div>
        </div>
        <div id="anniu" onclick="Hua()"  style="left:175px;"></div>
    </body>
    <script type="text/javascript">
    	//蓝色的长度变大
		//绿色的长度变小
		//红色框的位置
		var id;
		function Hua()
		{
			id = window.setInterval("Dong()",20);	
		}
		//每一次调用一次,改变的样式
		function Dong()
		{
			//获取蓝色的元素
			var left = document.getElementById("nei_1");
			
			//获取蓝色的宽度
			var lw = left.style.width;	
			
			//判断宽度是否超出
			if(parseInt(lw.substr(0,lw.length-2))>700)
			{
				window.clearInterval(id);
				return;	
			}
			
			//获取数字加2
			lw = parseInt(lw.substr(0,lw.length-2))+2;
			
			//修改样式
			left.style.width = lw+"px";		
			//绿色的修改
			var right = document.getElementById("nei_2");
			var rw = right.style.width;
			rw = parseInt(rw.substr(0,rw.length-2))-2;
			right.style.width = rw+"px";
			//红色的修改
			var an = document.getElementById("anniu");
			var al = an.style.left;
			al = parseInt(al.substr(0,al.length-2))+2;
			an.style.left = al+"px";
		}
		var ad;
		function Hui()
		{
			ad = window.setInterval("Lai()",20);	
		}
		function Lai()
		{
			//绿色的修改
			var right = document.getElementById("nei_2");
			var rw = right.style.width;
			if(parseInt(rw.substr(0,rw.length-2))>700)
			{
				window.clearInterval(ad);
				return;	
			}
			rw = parseInt(rw.substr(0,rw.length-2))+2;
			right.style.width = rw+"px";
			//红色的修改
			var an = document.getElementById("anniu");
			var al = an.style.left;
			al = parseInt(al.substr(0,al.length-2))-2;
			an.style.left = al+"px";
			//获取蓝色的元素
			var left = document.getElementById("nei_1");
			
			//获取蓝色的宽度
			var lw = left.style.width;
			lw = parseInt(lw.substr(0,lw.length-2))-2;
			left.style.width = lw+"px";	
		}
    </script>

 

 

posted @ 2018-04-20 08:24  navyyouth  阅读(213)  评论(0编辑  收藏  举报