元素定时器移动（move.js）

//ele——要移动的元素
//cssprop——要改变的css样式
//targetval——目标值
//totaltime——耗时时间(单位是毫秒)

//示例：move(box,"left",window.innerWidth,3000);
function move(ele,cssprop,targetval,totaltime){
    //获取元素当前的属性值
    var currentValue = parseInt(getStyle(ele)[cssprop]);
    //总路程
    var distance =  targetval-currentValue;
    //总路程/总时间=速度(求出 每毫秒的速度)
    var speed = distance/totaltime;
    /**
     * 由于定时器是每隔30毫秒，变化一次，speed应该等于  xxx像素/30毫秒
     * so~~~~
     * speed = distance/totaltime * 30; 
     */
    speed *= 30;
    //每次开启新的定时器之前，先关闭之前的定时器
    clearInterval(ele.timer);

    ele.timer = setInterval(function(){
        //获取当前的值
        var currentValue = parseInt(getStyle(ele)[cssprop]);
        //修改元素对应的CSS属性
        ele.style[cssprop] = currentValue+speed+"px";

        //获取修改过后的当前值
        var updatedCurrentValue = parseInt(ele.style[cssprop]);

        //判断当前值是否跟目标值，已经接近，相差不到0.5
        if( Math.abs( updatedCurrentValue - targetval) < 0.5) {
            //让元素直接等于目标值（仅仅只是为了解决小数点的误差，这句代码可以没有）
            ele.style[cssprop] = targetval + "px";
            //结束定时器
            clearInterval(ele.timer);
        }
    }, 30);
}
//获取非行内样式
function getStyle(ele){
    if(ele.currentStyle) {
        return ele.currentStyle;
    } else {
        return getComputedStyle(ele);
    } 
}