javascript 之完美运动封装

2017-08-21  本文已影响0人  夜息白鸽

getStyle获取元素样式 兼容IE火狐

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

function startMov dom 操作元素运动
json元素这里可以同时操作多种元素变化,把style当成数组传进去
列如:startMove(oDiv, {width: 102, height: 200, opacity: 100});
fn在这里代表回调函数,有则执行

function startMove(obj, json, fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;     //
        for(var attr in json)
        {       
            var iCur=0;         
            if(attr=='opacity')
            {
                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCur=parseInt(getStyle(obj, attr));
            }       
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?            
                        Math.ceil(iSpeed):Math.floor(iSpeed);                   
            if(iCur!=json[attr])
            {
                bStop=false;
            }
            
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            }
            else
            {
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }
        
        if(bStop)
        {
            clearInterval(obj.timer);
            
            if(fn)
            {
                fn();
            }
        }
    }, 30)
}

有经验的程序员肯定发现里面还有一些坑,比如还想控制DOM树的startMov执行时间,事实上也能当成参数往里传。
var iSpeed=(json[attr]-iCur)/8;
还有setInterval 后面的执行时间 均可控制执行时间,
这里本人使用了看的较为舒服的/8速度

上一篇下一篇

猜你喜欢

热点阅读