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

 

posted @ 2013-06-23 21:19  猫多多  阅读(910)  评论(0编辑  收藏  举报