js实现带缓动动画的导航栏效果

  ul,li { padding: 0; margin: 0; }

  li { list-style: none; }

   #box{

   height: 48px;

   width: 900px;

   background-color: #459DF5;

   margin: 50px auto;

   position: relative;

   }

   #caution {

   width: 150px;

   height: 48px;

   background-color: #4B92D8;

   position: absolute;

   top: 0;

   left: 0;

   }

 #list {

 position: absolute;

 }

   #list li {

   width: 150px;

   height: 48px;

   float: left;

   color: #fff;

   font: 500 20px/48px "微软雅黑";

   text-align: center;

   cursor: pointer;

   }

   window.onload = function(){

   //获取ul ID

   var oUl = document.getElementById("list");

   // 获取span ID

   var caution = document.getElementById("caution");

   //获取ul 所有孩子

   var aLi = oUl.children;

   //定时器管理

   var timer = null;

   //缓动

   var leader = 0;

   var target = 0;

    //停留

    var current = 0;

   for(var i = 0;i

     //鼠标移动

   aLi[i].onmouseover=function(){

      //关闭定时器

   clearInterval(timer);

      //获取当前的left值

   target=this.offsetLeft;

      //开启定时器

   timer=setInterval(autoCaution,20);  

   }

     //鼠标点击

     aLi[i].onmousedown=function(){

      //清楚所有高亮的文字

      for(varj=0;j

       aLi[j].style.color="#fff";

      }

      //当前点击栏变为红色

      this.style.color="#ccc";

      //提示框

      current=this.offsetLeft;

      caution.style.left=current+"px";     

     }

   }

    //鼠标离开

   oUl.onmouseout=function(){

     //关闭定时器

     clearInterval(timer);

     target=current;

     timer=setInterval(autoCaution,20);

   }

   //缓动动画

   function autoCaution(){  

   leader= leader +(target - leader) /10;

   caution.style.left=leader+"px";

   }

   }