这里的效果是：鼠标在第一个时，改变高度；在第二个时，改变宽度。并且我们发现前面的代码中有很多重复的，我们依然根据以前的方法，将不同的部分取出来，用参数的方法传进去同样达到我们想要的效果，（这里不同的是width和height，我们用一个参数attr来传进去），代码如下：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'height',400); } Li1.onmouseout = function(){ startMove(this,'height',100) } Li2.onmouseover = function(){ startMove(this,'width',400); } Li2.onmouseout = function(){ startMove(this,'width',200) } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,attr)); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style[attr] = icur+speed+'px'; } },30) }
在这里，我们试着给透明度也来进行变化，
css中：
ul li{ filter:alpha(opacity:30);opacity:0.3;}
Javascript中：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'opacity',100); } Li1.onmouseout = function(){ startMove(this,'opacity',30) } }
奇怪的是，居然没有我们想要的结果
原因：假设1：宽度一般为整型，而opacity的值为0-1；假设2：opacity是没有单位的
修改1：增加一个判断，当传入的值为opacity的时候，我们执行parseFloat，代码如下：
var icur = 0; if(attr == 'opacity'){ icur = parseFloat(getStyle(obj,attr))*100; }else{ icur = parseInt(getStyle(obj,attr)); }
修改2：再增加一个判断
if(iTarget == icur){ clearInterval(obj.timer); } else{ if(attr = 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity = (icur+speed)/100; } else{ obj.style[attr] = icur+speed+'px'; } }
修改后我们在浏览器下，仍能发现问题，就是opacity的值比1大了一点点
原因分析：计算机的运算并不是那么准确，会出现误差，
修改：我们在前面增加一个 Math.round，对小数部分进行四舍五入，代码如下
var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); }
这样，我们的效果就基本完成了，全部代码如下：
<!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; filter:alpha(opacity:30); opacity:0.3; } </style> <script type="text/javascript"> window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'opacity',100); } Li1.onmouseout = function(){ startMove(this,'opacity',30) } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ if(attr = 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity = (icur+speed)/100; } else{ obj.style[attr] = 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> </ul> </body> </html>
这样，我们就可以对我们的运动进行任意值的变化了。
其实，在不是不觉间，就已经将一个简单的动画进行了封装，得到一个简单的Javascript动画库了。后面，我们将继续对我们Javascript库进行补充。