原生JavaScript实现简单平移动画

1. 知识点 ：

• 计时器 （serInterval  &&  clearIntreval ）
• js获取到CSS样式 （getComputedStyle  &&  currentStyle ）
• 简单封装平移动画函数(function)

2.具体实现：

1).整体思路：

先获取到对象原来的值[W]，定义一个目标值[T]（即希望平移到的位置值），然后通过判断W和T的大小关系决定事增加还是减小其对应样式的值。

2).获取css样式的函数：

//获取css样式的函数
        function getStyle(obj,sty){
            if(window.getComputedStyle){
                return getComputedStyle(box,null)[sty];
            }else{
                return obj.currentStyle[sty];
            }
        }

3).比较T和W的大小关系

if(targetWidth > parseInt(w)){
            var move = setInterval(function(){
                x++;
                //设置停止增量
                if(x >= targetWidth - parseInt(w)){
                    clearInterval(move);
                    obj.style[sty] = targetWidth + 'px';
                }
                obj.style[sty] = parseInt(w) + x +'px';
            }, 30);
        }
        //如果target的值小于box的宽度
        else{
            var move = setInterval(function(){
                x++;
                //设置停止增量
                if(x >= parseInt(w) - targetWidth){
                    clearInterval(move);
                    obj.style[obj] = targetWidth + 'px';
                }
                obj.style[obj] = parseInt(w) - x +'px';
            }, 30);
        }
    }