JavaScript常用封装函数

JavaScript常用封装函数

基本运动

function doMove(obj,attr,speed,target,endFn){
    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);
}

透明度变化

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

抖动

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

获取计算后的样式

function getStyle( obj ,attr ){
    if( obj.currentStyle ){
        return parseFloat( obj.currentStyle[attr] || 1 );   
    } 
    return parseFloat( getComputedStyle(obj)[attr] );
}

获取计算后的样式并且赋值

function css(obj,attr,val){
    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;
    }
}

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