JavaScript經常使用封裝函數

基本運動
function doMove(obj,attr,speed,target,endFn){css

var iCur = getStyle( obj, attr );

speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed);

clearInterval(obj.timer);

obj.timer = setInterval(function(){

    iCur = getStyle( obj, attr ) + speed;

    if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){

        iCur = target;

    }

    obj.style[attr] = iCur + 'px';

    if(iCur == target){

        clearInterval(obj.timer);

        if( typeof endFn === 'function' ){  endFn(); }  
    }

},30);

}node

透明度變化
function opacity(obj,speed,target,endFn){函數

var iCur = getStyle( obj, 'opacity' ) * 100;

speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed);

clearInterval(obj.alpha);

obj.alpha = setInterval(function(){

    iCur = getStyle( obj, 'opacity' )*100 + speed;

    if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){

        iCur = target;

    }

    obj.style.opacity = iCur / 100;

    obj.style.filter = 'alpha(opacity: '+ iCur +')';

    if(iCur == target){

        clearInterval(obj.alpha);

        if( typeof endFn === 'function' ){  endFn(); }  
    }

},30);

}code

抖動遞歸

function shake(obj,attr,endFn){事件

var pos = getStyle(obj,attr);

var arr = [];

for(var i=14; i>=0; i-=2){

    arr.push(-i,i); 
}

obj.shake = setInterval(function(){

    obj.style[attr] = pos + arr[i++] + 'px';

    if(i==arr.length){

        clearInterval(obj.shake);   

        if( typeof endFn === 'function' )endFn();
    }   

},30);

}ci

獲取計算後的樣式
function getStyle( obj ,attr ){get

if( obj.currentStyle ){

    return parseFloat( obj.currentStyle[attr] || 1 );   
} 

return parseFloat( getComputedStyle(obj)[attr] );

}it

獲取計算後的樣式而且賦值
function css(obj,attr,val){io

if(val)
{
    if(attr=="opacity")
    {
        obj.style['opacity']=val/100;

        obj.style['filter']="alpha(opacity="+val+")";
    }
    else
    {
        obj.style[attr]=val+"px";
    }
}
else
{
    iVal=parseFloat(getStyle(obj,attr));

    if(attr=="opacity")
    {
        iVal=Math.round(iVal*100);
    }
    return iVal;
}

}

事件綁定
function bind(obj,ev,fn){

if( obj.addEventListener ){

    obj.addEventListener(ev,fn,false);

}else{

    obj.attachEvent('on' + ev,function(){

        fn.call(obj);   
    }); 
}

}

DOM下經常使用封裝函數
function getPrev( obj ){

if( !obj || !obj.previousSibling )return null;

//先處理obj不是真值或者沒有上一個兄弟節點的狀況。

return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling ); //遞歸

//不斷往上一層一層地找元素節點,直到找到或者返回Null爲止。

}

function getNext( obj ){

if( !obj || !obj.nextSibling )return null;

//先處理obj不是真值或者沒有下一個兄弟節點的狀況。

return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling ); //遞歸

//不斷往下一層一層地找元素節點,直到找到或者返回Null爲止。

}

function getFirst( obj ){

if( !obj || !obj.firstChild )return null;

//先處理obj不是真值或者沒有第一個兄弟節點的狀況。

return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild ); //遞歸

//若是第一個子節點不是元素節點,就以第一個子節點爲當前節點,查找下一個兄弟節點。

}

function getLast( obj ){

if( !obj || !obj.lastChild )return null;

//先處理obj不是真值或者沒有最後一個兄弟節點的狀況。

return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild ); //遞歸

//若是第一個子節點不是元素節點,就以第一個子節點爲當前節點,查找下一個兄弟節點。

}

獲取元素在當前頁面中的絕對位置
function posLeft( obj ){

var iLeft = 0;

    while( obj ){

        iLeft += obj.offsetLeft;

        obj = obj.offsetParent;
    }
    return iLeft;

}

function posTop( obj ){

var iTop = 0;

    while( obj ){

        iTop += obj.offsetTop;

        obj = obj.offsetParent;
    }
    return iTop;

}
相關文章
相關標籤/搜索