在前面的文章中讲了简单的Javascript动画效果，这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法。
在前面的多物体宽度变化的例子中，我们给其增加代码：border: 4px solid #000;我们发现，鼠标移出后，宽度不是200px了，那么究竟是如何产生这种情况的呢？下面我们通过一个新的例子来分析
html代码：
<div>hello</div>
css代码：
body,div{ margin: 0px; padding: 0px; }
div{ width: 200px; height: 200px; background: red; border: 1px solid #000;}
Javascript代码：
window.onload = function(){ startMove(); } function startMove(){ setInterval(function(){ var oDiv = document.getElementById('div1'); oDiv.style.width = oDiv.offsetWidth-1+'px'; },30) } /*此时的效果为宽度不断增加 * 加上border: 2px solid #000;之后，不断增大 * 原因：当前的宽为202，减一后为201，大于200 * 改变：oDiv.offsetWidth-2 * 结果：宽永远为200px * 改变：字行内样式中加宽为200px<div></div> * 结果：改变border的值，可以得到宽度减小的效果 * 思考：使用getStyle函数 */
在这里，我们感觉是offsetWidth上存在问题，我们引入getStyle函数（其中的判断分别为兼容ie和firefox），
function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr]; } else{//firefox return getComputedStyle(obj,false)[attr]; } }
然后我们对oDiv.style.width = oDiv.offsetWidth-1+'px';代码进行修改，代码如下：
oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';
在这里，得到的就是不断减小的效果。我们继续对代码进行修改
css中：
div{ font-size: 12px;color: #fff;}
Javascript中：
oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
此时的效果为宽度不断减小，字体不断增大。（前面主要是学习getStyle的用法）
在这里，我们再回到多物体动画上，我们将之前代码中的的obj.offsetWidth改为parseInt(getStyle(obj,'width'))，在这里我们通过图片看一下他们间的不同：
我们可以发现，parseInt(getStyle(obj,'width'))出现了多次，我们可以将将parseInt(getStyle(obj,'width'))赋值给变量icur，这时我们得到的效果就比较好了，此时的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ margin: 0px; padding: 0px; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; } </style> <script type="text/javascript"> 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 icur = parseInt(getStyle(obj,'width')); //将parseInt(getStyle(obj,'width'))赋值给变量icur var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ //obj.style.width = icur+speed+'px'; obj.style['width'] = icur+speed+'px'; } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
到这里，单一动画效果实现了，如果我们想要第一个li改变宽度，第二个li改变高度，这里我们应该怎样呢？
思路：在li里面加入id，分情况实现，代码：<li></li> <li></li>
实现：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,400); } Li1.onmouseout = function(){ startMove(this,100) } Li2.onmouseover = function(){ startMove1(this,400); } Li2.onmouseout = function(){ startMove1(this,200) } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,'height')); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style['height'] = icur+speed+'px'; } },30) } function startMove1(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,'width')); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style['width'] = icur+speed+'px'; } },30) } function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } }