js动画效果之多物体动画

此案例演示的是多物体控制运动 下面两张图片演示的都是鼠标放在当前li其宽度发生变化，先看效果图，看看两图的区别： 对比： 区别就不说了，很简单，原因：控制多物体运动勿使用公共属性，此处图一是这些li公用一个timer，图二给每个li都添加了timer。代码上：

window.onload=function(){ var oli=document.getElementsByTagName('li'); for(var i=0;i<oli.length;i++){ oli[i].timer=null; //给每一个元素添加自己的定时器（不公用） oli[i].onmousemove=function(){ startMove(this,200); } oli[i].onmouseout=function(){ startMove(this,100); } } } //var timer=null; //公共定时器 function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-obj.offsetWidth)/7; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30); }

for循环中每个li出发事件必须传入this,此处也可以使用闭包（函数以及它所连接的周围作用域的变量即为闭包），它突破了作用域的限制，可以读取到函数内部的变量，也可以让这些变量的值始终保存在内存中。故使用需谨慎。下面是改变多物体透明度的例子，同样这些li的alhpa（透明度初值）不能共用。 这是4个div盒子，实现鼠标滑过其透明度渐变的效果。下面是实现的js代码，

window.onload=function(){ var odiv=document.getElementsByTagName('div'); for(var i=0;i<odiv.length;i++){ odiv[i].timer=null; odiv[i].alpha=30; odiv[i].onmousemove=function(){ startChange(this,30); } odiv[i].onmouseout=function(){ startChange(this,100); } } } function startChange(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; } if(obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30); }