首页 > 代码库 > js多个物体运动问题2

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,属性与运动对象绑定:速度,其它属性值(如透明度等)