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

js多个物体运动问题2

2024-07-12 19:49:53   222人阅读

问题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,属性与运动对象绑定：速度，其它属性值（如透明度等）


联系
我们