js怎么实现带缓动动画的导航栏效果-创新互联

这篇文章主要介绍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
 
 
  
  
  
  
首页
  
公司简介
  
企业文化
  
招贤纳士
  
企业论坛