图片淡入淡出

window.onload = function(){
    var oImg = document.getElementById("img1");
    oImg.onmouseover = function(){
        startMove(100);
        }
    oImg.onmouseout = function(){
        startMove(30);
        }
    
    }
    var timer = null;
    var alpha = 30;
function startMove(iTarget){
    var oImg = document.getElementById("img1");
    clearInterval(timer);
    timer = setInterval(function(){
        var iSpeed = 0;
        if(alpha < iTarget){
            iSpeed = 10;
        }else{iSpeed = -10;}
        
        if(alpha == iTarget){
            clearInterval(timer);
            }else{
                alpha += iSpeed;
                oImg.style.filter = 'alpha(opacity:'+alpha+')';
                oImg.style.opacity = alpha/100;
            }
        },30)
    
    }

 

发现一个问题：

　　当把

var timer = null;
var alpha = 30;
这两行放在 function startMove中的时候，运行程序时，会发生一闪一闪的情况，主要是opacity变成100后，鼠标移开，opacity 不能回到原来设定的 30 ，原因还在进一步查找中

当需要元素进行缓冲的时候，即需要元素离终点越近，速度越慢的时候,只需要将速度改为以下即可：

 var iSpeed = (iTarget - offsetLeft) / 8;

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

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

iSpeed = Math.ceil(iSpeed)

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

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

iSpeed = Math.floor(iSpeed)

整理如下：

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