js多个物体运动的问题1

问题2

http://www.cnblogs.com/huaci/p/3854304.html

 

用js写一个物体的运动很简单。如果一个页面有多个物体在运动,它会不会出问题呢?

ok,我们来看一个示例

让多个div变宽

现象:onmouseover时,div宽度变宽;onmouseout时,div恢复原大小

 

html部分

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<style>
div { width:100px; height:30px; margin:10px; background:green;}
</style>

 

js部分

<script>

window.onload = function(){
	var aDiv = document.getElementsByTagName("div");
	
	for(var i=0; i<aDiv.length; i++){
		aDiv[i].onmouseover = function(){
			startMove(this,400);
		}
		aDiv[i].onmouseout = function(){
			startMove(this,100);
		}
	}
}


var timer = null;
function startMove(obj, iTarget){
	clearInterval(timer);
	timer = setInterval(function(){
		var speed = (iTarget - obj.offsetWidth)/6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(obj.offsetWidth == iTarget){
			clearInterval(timer);			
		} else {
			obj.style.width = obj.offsetWidth + speed + "px";			
		}
		
	},30);
}
</script>

  

运行后,

问题:当鼠标在几个div之间来回切换操作时,发现之间的div停住了,收不回去了

原因:分析上面代码,原来是进入一个新的div操作时,把之前的所有定时器都给关了

一句话:整个程序就只有一个定时器

 

解决:为每个运动对象,都定义一个定时器

只开启和关闭当前操作的这个运动对象的定时器

 

现在给出修改后的完整代码啊

 

完整示例:

<script>

window.onload = function(){
	var aDiv = document.getElementsByTagName("div");
	
	for(var i=0; i<aDiv.length; i++){
		aDiv[i].timer = null;
      		aDiv[i].onmouseover = function(){
			startMove(this,400);
		}
		aDiv[i].onmouseout = function(){
			startMove(this,100);
		}
	}
}



function startMove(obj, iTarget){
	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";			
		}
		
	},30);
}
</script>

  

下一节,问题2

http://www.cnblogs.com/huaci/p/3854304.html

js多个物体运动的问题1,布布扣,bubuko.com

js多个物体运动的问题1

上一篇:js 实现 C# 的 format 方法


下一篇:中国移动飞信接口