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