js多个物体运动问题2

问题1

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