42、JavaScript的运动----多个物体同时运动

ゞ浴缸里的玫瑰 2022-09-21 14:26 206阅读 0赞

1、多个物体同时运动  
            ---例子：多个Div，鼠标移入变宽  
  单定时器，存在问题  
  每个Div一个定时器  
2、多物体运动框架  
**定时器作为物体的属性  
参数的传递：物体、目标值**  
    ---例子：多个Div淡入淡出  
  ** 所有东西都不能公用**

**属性与运动对象绑定**：速度、其他属性值（如透明度等）

3、多个Div，鼠标移入变宽的例子

3.1 代码

<head>
    		<meta charset="UTF-8">
    		<title>多物体运动框架</title>
    		<style type="text/css">
    			div {
    				width: 100px;
    				height: 50px;
    				background: red;
    				margin-top: 50px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    					//获取元素
    					var aDiv = document.getElementsByTagName("div");
    					for (var i = 0; i < aDiv.length; i++) {
    						aDiv[i].onmousemove = function() {
    							startMove(this, 300);
    						}
    						aDiv[i].onmouseout = function() {
    							startMove(this, 100);
    						}
    					}
    				}
    				//运动函数
    			function startMove(obj, iTarget) {
    				//清楚定时器函数
    				//由于是是适应于多个对象的变化,所以每个DIV有一个定时器
    				clearInterval(obj.timer);
    				//定时器函数
    				//每一个对象,有一个定时器
    				obj.timer = setInterval(function() {
    					//记录速度
    					var iSpeed = (iTarget - obj.offsetWidth) / 5;
    					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    					//运动和停止的判断条件
    					if (obj.offsetWidth == iTarget) {
    						//清楚定时器函数
    						clearInterval(obj.timer);
    					} else {
    						obj.style.width = obj.offsetWidth + iSpeed + 'px';
    					}
    				}, 30);
    			}
    		</script>
    	</head>
    
    	<body>
    		<div></div>
    		<div></div>
    		<div></div>
    	</body>

3.2 多个DIV淡入淡出的例子

<head>
    		<meta charset="UTF-8">
    		<title>多物体运动框架</title>
    		<style type="text/css">
    			div {
    				width: 100px;
    				height: 100px;
    				background: red;
    				margin-top: 50px;
    				filter: alpha(opacity: 30);
    				opacity: 0.3;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    					//获取元素
    					var aDiv = document.getElementsByTagName("div");
    					for (var i = 0; i < aDiv.length; i++) {
    						//将alpha作为,物体的一个属性
    						aDiv[i].alpha = 30;
    						aDiv[i].onmousemove = function() {
    							startMove(this, 100);
    						}
    						aDiv[i].onmouseout = function() {
    							startMove(this, 30);
    						}
    					}
    				}
    				//运动函数
    			function startMove(obj, iTarget) {
    				//清楚定时器函数
    				clearInterval(obj.timer);
    				//定时器函数
    				obj.timer = setInterval(function() {
    					//记录速度
    					var iSpeed = (iTarget - obj.alpha) / 8;
    					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    					//运动和停止的判断条件
    					if (obj.alpha == iTarget) {
    						//清楚定时器函数
    						clearInterval(obj.timer);
    					} else {
    						obj.alpha += iSpeed;
    						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>