jQuery如何实现滑动导航-创新互联

这篇文章主要介绍jQuery如何实现滑动导航，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1.1 App滑动导航

说明：这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1. 效果图 

1.1.2. Html

 
 
 
 
 
 
  
滑动到岗
  
滑动到岗
  
 
 
 

1.1.3. Css

 body,div,p{ 
   margin:0; 
   padding:0; 
  }   
  ul.slid{
   display: block;   
   position:fixed;
   top: 10px; 
   left:0px; 
   right:0px;        
   height:60px;
   background: #f2f2f2;
   overflow: height;  
  }
  ul.slid li{
   display: inline-block;
   width: 49%;
   height: 40px;
   margin-top: 10px;
   float: left;
   text-align: center;
   overflow: hidden;
 
  }
   ul.slid li:first-child{
   border-right: 1px solid red;
   }
  ul.slid li a{
   display: inline-block;    
   width: 120px;       
   text-decoration:none; 
   height:37px;
   line-height: 37px; 
   color: #898989;   
   overflow: hidden;
  }
  ul.slid li a:hover{
   color: red;
  }
  #navLine{
   height:2px; 
   background-color:red; 
   position:absolute;    
   bottom:7px; 
   width:0px; 
   left:0px; 
   display:none; 
   overflow:hidden;
  }
 

1.1.4. jQuery

 $(function (){   
   navSlid();
  });
  //滑动导航
  var navSlid = function(){ 
   var nline = $('#navLine'); 
   var lia = $('ul.slid li a'); 
   //初始化滑块 
   nline.css({ 
    'width':lia.width(), 
    'left' :parseInt(lia.position().left) 
   }); 
   $('ul.slid li a').mouseenter(function(){ 
    //显示滑块 
    if(nline.css('display') == 'none'){ 
     nline.show(); 
    }; 
    //移动滑块 
    nline.stop().animate({ 
     width: $(this).width(), 
     left: parseInt($(this).position().left) 
    },300); 
   }); 
  }; 
 

以上是“jQuery如何实现滑动导航”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。