资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

这篇文章主要介绍js怎么实现带缓动动画的导航栏效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

宁远网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。成都创新互联成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

实例代码:



 
  
  
  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
 
 
  
  
  
  
  • 首页
  •   
  • 公司简介
  •   
  • 企业文化
  •   
  • 招贤纳士
  •   
  • 企业论坛
  •      
     

    以上是“js怎么实现带缓动动画的导航栏效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    网站标题:js怎么实现带缓动动画的导航栏效果
    URL标题:http://www.cdkjz.cn/article/ipsghp.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220