一、缓冲动画
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.οnlοad=function(){ var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null; aLi[i].οnmοuseοver=function(){ startMove(this,400); } aLi[i].οnmοuseοut=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 。