window.onload = function(){
  var Li1 = document.getElementById('li1');
       Li1.timer = null;
       Li1.onmouseover = function(){
         startMove(this,'opacity',100);
       }
       Li1.onmouseout = function(){
         startMove(this,'opacity',30);
       }
   }

   var alpha = 30;
 function startMove(obj,attr,iTarget){
      clearInterval(obj.timer);
     
     obj.timer = setInterval(function(){
        var icur = 0;
        if (attr == 'opacity') {
           icur = parseFloat(getStyle(obj,attr))*100;
        }else{
           icur = parseInt(getStyle(obj,attr));
        }

     
        var speed = (iTarget-icur)/8;
        speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
        if(icur == iTarget){
         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';//.style[attr]方便传参
         }
       
       }
       
      },30)
 }

 function getStyle(obj,attr){
   if (obj.currentStyle) {
     return obj.currentStyle[attr];//支持IE
   }else{
     return getComputedStyle(obj,false)[attr];//支持火狐
   }
 }