js多个物体运动问题2

问题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>

综上，发现：

可以整理以下几条：

多物体运动框架：

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

2，参数的传递：物体，目标值

例子：多个Div淡入淡出

1,所有东西都不能共用

2,属性与运动对象绑定：速度，其它属性值（如透明度等）

js多个物体运动问题2