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);
            }