在前面的文章中讲了简单的Javascript动画效果，这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法。
在前面的多物体宽度变化的例子中，我们给其增加代码：border: 4px solid #000;我们发现，鼠标移出后，宽度不是200px了，那么究竟是如何产生这种情况的呢？下面我们通过一个新的例子来分析
HTML代码：
css代码：
代码：
rush:js;">
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 id="div1" style="width: 200px;">
*/
rush:js;">
function getStyle(obj,attr){
if(obj.currentStyle){//ie
return obj.currentStyle[attr];
}
else{//firefox
return getCo
mputedStyle(obj,false)[attr];
}
}
我们可以发现，parseInt(getStyle(obj,'width'))出现了多次，我们可以将将parseInt(getStyle(obj,'width'))赋值给变量icur，这时我们得到的效果就比较好了，此时的代码如下：
实现：
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,'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];
}
}
这里的效果是：鼠标在第一个时，改变高度；在第二个时，改变宽度。并且我们发现前面的代码中有很多重复的，我们依然根据以前的方法，将不同的部分取出来，用参数的方法传进去同样达到我们想要的效果，（这里不同的是width和height，我们用一个参数attr来传进去），代码如下：
0?Math.ceil(speed):Math.floor(speed);
if(iTarget == icur){
clearInterval(obj.timer);
}
else{
obj.style[attr] = icur+speed+'px';
}
},30)
}
在这里，我们试着给透明度也来进行变化，
css中：
Javascript中：
rush:js;">
window.onload = function(){
var Li1 = document.getElementById('li1');
var Li2 = document.getElementById('li2');
Li1.onmou
SEOver = function(){
startMove(this,'opacity',100);
}
Li1.onmou
SEOut = function(){
startMove(this,30)
}
}
奇怪的是，居然没有我们想要的结果
原因：
假设1：宽度一般为整型，而opacity的值为0-1；假设2：opacity是没有单位的
修改1：增加一个判断，当传入的值为opacity的时候，我们执行parseFloat，代码如下：
rush:js;">
var icur = 0;
if(attr == 'opacity'){
icur = parseFloat(getStyle(obj,attr))*100;
}else{
icur = parseInt(getStyle(obj,attr));
}
修改2：再增加一个判断
rush:js;">
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，对小数部分进行四舍五入，代码如下
rush:js;">
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
这样，我们的效果就基本完成了，全部代码如下：
rush:xhtml;">
<
Meta charset="UTF-8">
