js多个物体运动问题2

浏览数：18 / 时间：2015年06月09日

问题1

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

在上一讲问题1，我们可以整理出2点：

1，定时器作为运动物体的属性

2，startMove方法，参数要传递2个：物体，目标值

那么，如果运动物体的属性值改变，是通过一个变量值来改变的话，这时候会有什么问题呢？

示例：多个Div淡入淡出

现象：onmouseover时，透明度降低；onmouseout时，透明度增加

看看它会有什么问题，请看下面代码

html部分：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

<style>
	div { float:left; width:150px; height:200px; margin:20px; filter:alpha(opacity:30); opacity:0.3; background:green;}
</style>

js部分：

<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,100);
		}
		aDiv[i].onmouseout = function(){
			startMove(this,30);
		}		
	}
}

var vAlpha = 30;
function startMove(obj, iTarget){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (iTarget - vAlpha)/6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		
		if(vAlpha == iTarget){
			clearInterval(obj.timer);
		} else {
			vAlpha +=speed;
			obj.style.filter = "alpha(opacity:" + vAlpha + ")";
			obj.style.opacity = vAlpha;
			
			document.title = vAlpha;	//检测问题现象
		}
		
	},30);	
}


</script>

运行上面代码，发现

问题现象：快速的在几个div之间移动，然后在其中一个div上停止。

会发现每个div的透明度色彩不一样。

检测：document.title = vAlpha;

原因：vAlpha作为全局变量引起的。当从A中移出时，它减小。再迅速移入B中，它增加。一个要减小，一个要增加，这两个就这样绷着。

解决：

将vAlpha作为物体的属性

aDiv[i].vAlpha = 30;

启示：对于多物体运动来说，所有东西都不能共用

修改后的代码如下

完整示例：

<script>

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

//var vAlpha = 30;
function startMove(obj, iTarget){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var speed = (iTarget - obj.vAlpha)/6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        
        if(obj.vAlpha == iTarget){
            clearInterval(obj.timer);
        } else {
            obj.vAlpha +=speed;
            obj.style.filter = "alpha(opacity:" + obj.vAlpha + ")";
            obj.style.opacity = obj.vAlpha;
            
            document.title = obj.vAlpha;    //检测问题现象
        }
        
    },30);    
}


</script>