js运动应用：多物体运动框架（上）_js 基于运动距离框框-CSDN博客

本文链接：https://blog.csdn.net/zhanjiejiaoxiangni/article/details/83476380

多物体运动框架原理：

1、所有属性不可公用

2、属性与运动对象绑定：速度，透明度等其他属性值

案例一：多个div变宽：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
			
		div{
			width:100px;
			height:50px;
			background:red;
			margin:10px;
		}
		
		
	</style>
	<script>
		/**js运动应用--多个div变宽
			1、用单个定时器，会存在一个物体开始运动的时候会影响另一个物体的关闭
			2、解决方案：将定时器作为物体的属性，每个div定义一个定时器
		*/
		window.onload = function (){
			var oDiv = document.getElementsByTagName('div');
			for(var i=0;i<oDiv.length;i++){
				//每个div对应一个定时器
				oDiv[i].timer = null;
				oDiv[i].onmouseover = function(){
					startMove(this,500);
					
				}
				oDiv[i].onmouseout = function (){
					startMove(this,100);
				}
			}
			
		};
		//如果定义一个定时器，其中一个div开始运动的时候会影响另一个div的关闭。
		//var timer = null;
		function startMove(obj,iTarget){
			//关闭当前物体对应的timer
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
				var speed = (iTarget - obj.offsetWidth)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
				if(obj.offsetWidth == iTarget){
					clearInterval(obj.timer);
				}else{
					obj.style.width = obj.offsetWidth + speed + 'px';
					document.title = obj.offsetWidth;
				}
			},30);
			
			
		};
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	
</body>
</html>

案例二：多个div淡入淡出：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
			
		div{
			width:200px;
			height:200px;
			background:red;
			float:left;
			margin:10px;
			filter:alpha(opacity:30);
			opacity:0.3;
			
		}
		
		
	</style>
	<script>
		
		/**js运动应用--多个div变宽
			每个div对应自己的透明度
		*/
		window.onload = function (){
			var oDiv = document.getElementsByTagName('div');
			for(var i=0;i<oDiv.length;i++){
				//每个div对应一个定时器
				oDiv[i].timer = null;
				oDiv[i].alpha = 30;
				oDiv[i].onmouseover = function(){
					startMove(this,100);
					
				}
				oDiv[i].onmouseout = function (){
					startMove(this,30);
				}
			}
			
		};
		//定义一个透明度。
		//var alpha = 30;
		function startMove(obj,iTarget){
			//关闭当前物体对应的定时器
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
				var speed = (iTarget - obj.alpha)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
				if(obj.alpha == iTarget){
					clearInterval(obj.timer);
				}else{
					obj.alpha += speed;
					obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
					obj.style.opacity =obj.alpha/100;
				}
			},30);
			
			
		};
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	
</body>
</html>

案例三：div变宽和变高

通过obj.offsetAttr来获取样式，通过这种方法来获取元素的宽高时，如果没有边框border，可以正确获取，如果使用边框属性则会出现问题，为了解决这个问题，可以使用另一种方法，通过getComputedStyle属性来获取css样式（非行间）。
还有一种是通style属性来获取css样式（行间）。

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
			
		div{
			width:200px;
			height:200px;
			background:yellow;
			float:left;
			margin:10px;
			border:1px solid black;
			
		}
		
	</style>
	<script>
	
		
		/**可作为获取样式的公共方法*/
		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		
		
		window.onload = function (){
			var oDiv = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			oDiv.onmouseover = function (){
				startMove(this,400,'width');
			}
			oDiv.onmouseout = function(){
				startMove(this,200,'width');
			}
			oDiv2.onmouseover = function (){
				startMove(this,400,'height');
			};
			oDiv2.onmouseout = function (){
				startMove(this,200,'height');
			}
			
		};
		
		function startMove(obj,iTarget,attr){
			//关闭当前物体对应的定时器
			clearInterval(obj.timer);
			
			obj.timer = setInterval(function(){
				var cur = parseInt(getStyle(obj,attr));
				var speed = (iTarget - cur)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
				if(cur == iTarget){
					clearInterval(obj.timer);
				}else{
					obj.style[attr] = cur + speed + 'px';
				}
			},30);
			
			
		};
		
		
	</script>
</head>
<body>
	<div id="div1">变宽</div>
	<div id="div2">变高</div>
	
	
</body>
</html>

案例四：文本框展示div透明度，知识点：parseFloat小数点需四舍五入 Math.round()

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
			
		div{
			width:200px;
			height:200px;
			background:yellow;
			float:left;
			margin:10px;
			border:10px solid black;
			filter:alpha(opacity:30);
			opacity:0.3;
		}
		
	</style>
	<script>
	
		
		/**可作为获取样式的公共方法*/
		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		
		
		window.onload = function (){
			var oDiv = document.getElementById('div1');
		
			oDiv.onmouseover = function (){
				startMove(this,100,'opacity');
			}
			oDiv.onmouseout = function(){
				startMove(this,30,'opacity');
			}
			
			
		};
		
		function startMove(obj,iTarget,attr){
			//关闭当前物体对应的定时器
			clearInterval(obj.timer);
			
			obj.timer = setInterval(function(){
				var cur = 0;
				if(attr == 'opacity'){
					//小数问题，需要四舍五入
					cur = Math.round(parseFloat(getStyle(obj,attr))*100);
				}else{
					cur = parseInt(getStyle(obj,attr));
				}
				
				var speed = (iTarget - cur)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
				if(cur == iTarget){
					clearInterval(obj.timer);
				}else{
					if(attr =='opacity'){
						obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
						obj.style.opacity =(cur+speed)/100;
						document.getElementById('txt1').value = obj.style.opacity
					}else{
						obj.style[attr] = cur + speed + 'px';
					}
					
				}
			},30);
			
			
		};
		
		
	</script>
</head>
<body>
	<input type ="text" id="txt1"/>
	<div id="div1"></div>
	
	
	
</body>
</html>