13，多个div运动，obj.timer,obj.alpha,getStyle()任意值变化的运动，透明度运动与其他值运动的区别；

1，多个div变宽：obj.timer。给每一个对象加一个timer.防止共用一个timer时前一个对象运动卡在中途的情况发生；

多物体运动：1没有共用的属性；

<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, 400);
        };
        
        aDiv[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)/6;
        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);
}
</script>

透明度变化时，var alpha=30;定义alpha变量来存储透明度初始值，然后给每一个div添加一个alpha属性，obj.alpha,目的是为防止div强夺同一个alpha，导致透明度变到一半终止，无法到达目标值。

function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var speed=(iTarget-obj.alpha)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        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);
}

任意值变化的运动：offsetWidth：包含div宽度也包含margin.padding;borderWidth.会造成bug如

　　timer=setInterval(function(){

　　oDiv.style.width=offsetWidth-1+'px'

　　},30)

div的宽度不会减小，反而会以加1的速度不断变宽），所以用函数getStyle()来获取div样式的任意值；

getStyle函数：function getStyle(obj,name){

　　　　　　　　　　if(obj.currentStyle){

　　　　　　　　　　　　return obj.currentStyle[name];

　　　　　　　　　　}else{

　　　　　　　　　　　　return getComputedStyle(obj,false)[name];

　　　　　　　　　　}

　　　　　　　　}

任意值变化:当值为opacity时，div当前opacity值为：cur=parseFloat(getStyle(obj, attr))*100; 因为获取的透明度为小数，所以用parseFloat;

　　

obj.style.filter='alpha(opcity:'+(cur+speed)+')';//ie
                obj.style.opacity=(cur+speed)/100;//firefox,chrome等高级浏览器；

function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, attr, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var cur=0;
        
        if(attr=='opacity')
        {
            cur=parseFloat(getStyle(obj, attr))*100;
        }
        else
        {
            cur=parseInt(getStyle(obj, attr));
        }
        
        var speed=(iTarget-cur)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(cur==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opcity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
    }, 30);
}