JS運動框架

/**
 * 使用offsetLeft,需注意margin的使用
 * offsetLeft = margin-left + left;
 * offsetWidth= padding + border + width;
 * 
 * @author Lonve
 */
function getStyle(elem,attr){
    var result = null;
    result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr];
    if(attr=="opacity"){
        return parseInt(parseFloat(result)*100);
    }
    return parseInt(result);
}


var timer = null;
//勻速運動中止條件--->距離足夠近
function offsetMove1(offset){
    var oDiv = document.getElementById("oDiv");
    var speed = 0;
    speed = oDiv.offsetLeft < offset?10:-10;
    
    clearInterval(timer);
    timer = setInterval(function(){
        if(oDiv.offsetLeft >= offset){ //Math.abs(oDiv.offsetLeft - offset)<speed;
            clearInterval(timer);
        }else{
            oDiv.style.left = oDiv.offsetLeft + speed + "px";
        }
    },30)
}

//緩動運動條件 1.變化的運動速度,最後速度爲零
//問題:offsetLeft
function offsetMove2(elem,offset){
    clearInterval(elem.timer);
    var speed = 0;
    elem.timer = setInterval(function(){
        speed = (offset - elem.offsetLeft)/8;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        
        //是否到達到目標點
        if(elem.offsetLeft == offset){
            clearInterval(elem.timer);
        }else{
            elem.style.left = elem.offsetLeft + speed + "px";
        }
    },30)
}

//任意屬性值
//避免小數值    parseInt(0.3*100)
function offsetMove3(elem,attr,offset){
    clearInterval(elem.timer);
    elem.timer = setInterval(function(){
        var curAttr = getStyle(elem,attr);            //當前屬性值
        var speed = (offset - curAttr)/8;            //當前速度
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(offset == curAttr){
            clearInterval(elem.timer);
        }else{
            if(attr=="opacity"){
                elem.style.filter = "alpha(opacity="+(curAttr +speed)+")";
                elem.style.opacity= (curAttr + speed)/100;
            }else{
                elem.style[attr] = (curAttr + speed) + "px";
            }
        }
    },30)
}

//鏈式運動
function offsetMove4(elem,attr,offset,fn){
    clearInterval(elem.timer);
    elem.timer = setInterval(function(){
        var curAttr = getStyle(elem,attr);
        var speed   = (offset - curAttr)/8;
        speed = speed > 0? Math.ceil(speed):Math.floor(speed);
        
        if(offset == curAttr){
            clearInterval(elem.timer);
            if(fn){ fn(); }
        }else{
            if(attr=="opacity"){
                elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
                elem.style.opacity= (curAttr+speed)/100;
            }else{
                elem.style[attr] = curAttr + speed + "px";
            }
        }
    },30)
}

//多個屬性同時變化
function offsetMove5(elem,json,fn){
    var isStop = true;            //全部值都到達
    clearInterval(elem.timer);
    elem.timer = setInterval(function(){
        //歷遍json屬性
        for(var attr in json){
            //1.取當前與速度
            var offset  = json[attr];
            var curAttr = getStyle(elem,attr);
            var speed   = (offset - curAttr)/8;
            speed = speed > 0? Math.ceil(speed):Math.floor(speed);
            
            //2.檢測中止
            if(offset!=curAttr){
                isStop = false;
            }
            if(attr=="opacity"){
                elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
                elem.style.opacity= (curAttr+speed)/100;
            }else{
                elem.style[attr] = curAttr + speed + "px";
            }
        }
        //全部值都到達目標值,則中止
        if(isStop){
            clearInterval(elem.timer);
            if(fn){ fn(); }
        }
    },30);
}