一、缓冲动画
Ps1：opacity：所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。
Ps3：动画大致模版（思路）：
            window.onload = function(){
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-200);
            }
        }
        var timer=null;
        function startMove(iTarget){
            clearInterval(timer);
            var oDiv = document.getElementById("div1");
            timer=setInterval(function(){
                var speed=(iTarget-oDiv.offsetLeft)/20;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }
                else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
                }
            },30)
        }

二、多物体运动
for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消)
利用参数中的this来指定所选择的当前元素
多物体不要共用一个值,在对象上定义一个单独的属性保持值
存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。

    window.onload=function(){
        var aLi=document.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            aLi[i].timer=null;
            aLi[i].onmouseover=function(){
                startMove(this,400);
            }
            aLi[i].onmouseout=function(){
                startMove(this,200);
            }
        }
    }
    function startMove(obj,iTarget){
        clearInterval(obj.timer)
        obj.timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if (obj.offsetWidth==iTarget) {
                clearInterval(obj.timer)
            }
            else{
                obj.style.width=obj.offsetWidth+speed+"px";
            }
        },30)
    }

三、获取样式
1.过程：obj.stlye.width是样式中的块width；而obj.offsetWidth是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度;
2.原型为parseInt ( String s , [ int radix ] )，用于解析一个字符串，并返回一个整数。还有parseFloat,则解析一个字符串，返回一个浮点数;
3.用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element‘).style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式；
3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null）
function getStyle(obj,style){//引用时style要带引号
if(obj.currentStyle){
return obj.currentStyle[style];
}else{
return getComputedStyle(obj,null)[style];
}
}
style：标准的样式！可用来查询由html标签的style属性指定的样式。
currentStyle：可用来查询/修改外联或者内部样式表中的样式（仅IE、Opera）。 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。当使用currentStyle做条件判断是，要加上body,document.body.currentStyle，这样才能兼容上IE6,7。
runtimeStyle： 运行时的样式！如果与style的属性重叠，将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
getComputedStyle：用于Firefox、Chrome、Safari、Opera等浏览器，作用与currentStyle相同。

currentStyle 指浏览器当前显示的，如果用runtimeStyle 写入新样式，那么这个新样式权重最高，currentStyle的值亦改为新样式，所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ，否则就style 或currentStyle 。

JS动画之缓冲动画与多物体动画即获取样式的方法