javascript 之完美運動封裝

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速度

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容