1 window.onload = function(){ 2     var oImg = document.getElementById("img1"); 3     oImg.onmouseover = function(){ 4         startMove(100); 5         } 6     oImg.onmouseout = function(){ 7         startMove(30); 8         } 9     10     }11     var timer = null;12     var alpha = 30;13 function startMove(iTarget){
       15     var oImg = document.getElementById("img1");16     clearInterval(timer);17     timer = setInterval(function(){18         var iSpeed = 0;19         if(alpha < iTarget){20             iSpeed = 10;21         }else{iSpeed = -10;}22         23         if(alpha == iTarget){24             clearInterval(timer);25             }else{26                 alpha += iSpeed;27                 oImg.style.filter = 'alpha(opacity:'+alpha+')';28                 oImg.style.opacity = alpha/100;29             }30         },30)31     32     }

 

发现一个问题：

　　当把

var timer = null;var alpha = 30; 这两行放在 function startMove中的时候，运行程序时，会发生一闪一闪的情况，主要是opacity变成100后，鼠标移开，opacity 不能回到原来设定的 30 ，原因还在进一步查找中 当需要元素进行缓冲的时候，即需要元素离终点越近，速度越慢的时候,只需要将速度改为以下即可：

1  var iSpeed = (iTarget - offsetLeft) / 8;

 当然这样的时候有可能最后的位置不是终点设置的位置，原因是iSpeed，iTarget 到最后会变成小数

既然是小数的问题，那就对小数进行改进，改进的方法如下：

1 iSpeed = Math.ceil(iSpeed)

这样就可以到目标终点（从左往右运动）

但是当从右往左的时候，又会出现这样的问题 ，是负数引起的问题（-0.5向上取整是0），因此要向下取整：

1 iSpeed = Math.floor(iSpeed)

整理如下：

1 iSpeed = iSpeed >0 ?Math.ceil(iSpeed):Math.floor(iSpeed);