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