模仿今日头条导航栏滑动显示更多

 

html：

 1 <div class="subNav">
 2     <a href="javascript:void(0)" class="floatR subNav_choose"><span></span></a>
 3     <div class="subNav_menu">
 4         <ul>
 5             <li class="subNav_curr"><a href="#">热门</a></li>
 6             <li><a href="#">娱乐</a></li>
 7             <li><a href="#">财经</a></li> 
 8             <li><a href="#">科技</a></li>
 9             <li><a href="#">时尚</a></li> 
10             <li><a href="#">图片</a></li>
11             <li><a href="#">汽车</a></li>
12             <li><a href="#">科技1</a></li>
13             <li><a href="#">时尚1</a></li> 
14             <li><a href="#">图片1</a></li>
15             <li><a href="#">汽车1</a></li>
16        </ul>
17     </div>
18     </div>
19     <div class="subNav_chooseCont">
20     <div class="floatR subNav_choose chooseCont_close"><span></span></div>
21     <div class="chooseCont_text">
22   
23         <ul class="chooseCont_list">
24             <li><a href="#">热门</a></li>
25             <li><a href="#">娱乐</a></li>
26             <li><a href="#">财经</a></li> 
27             <li><a href="#">科技</a></li>
28             <li><a href="#">时尚</a></li> 
29             <li><a href="#">图片</a></li>
30             <li><a href="#">汽车</a></li> 
31             <li><a href="#">科技1</a></li>
32             <li><a href="#">时尚1</a></li> 
33             <li><a href="#">图片1</a></li>
34             <li><a href="#">汽车1</a></li>
35         </ul>
36     </div>
37 </div>

js

 1 $('.subNav_menu ul li').on("click",function(){
 2     $(this).addClass("subNav_curr").siblings().removeClass("subNav_curr");
 3 })
 4 var screenWidth = $(window).width();
 5 var liWidth=80;
 6 var numMin = parseInt ( screenWidth/liWidth/2 );
 7 var menuWidth = $('.subNav_menu ul').outerWidth();
 8 var liNum = $('.subNav_menu ul li').length ;
 9 var allLi = 0;
10 for(var i = 0; i < liNum; i++){
11   allLi += $('.subNav_menu ul li').eq(i).outerWidth();
12 }
13 for (var i = 0; i < numMin; i++) {
14   $('.subNav_menu ul li').eq(i).click(function(){
15     $('.subNav_menu').scrollLeft( 0 );
16   });
17 }
18 for (var i = numMin; i < (liNum-numMin); i++) {
19   $('.subNav_menu ul li').eq(i).click(function(){
20       var index = $(this).index();
21       var len=0;
22       for (var i = numMin; i < index; i++) {
23         var len1 =  $('.subNav_menu ul li').eq(i).outerWidth();
24         len = len + len1;
25       }
26       $('.subNav_menu').scrollLeft( (liWidth+4)*(index-numMin)+len- liWidth*(index-numMin) );       
27   });
28 }
29 for (var i = (liNum-numMin) ; i < liNum ; i++) {
30   $('.subNav_menu ul li').eq(i).click(function(){
31     $('.subNav_menu').scrollLeft( allLi - menuWidth + liWidth  );
32   });        
33 }
34 
35 $(".subNav_choose").on("click",function(){
36     $(".subNav_chooseCont").css({"opacity":"1","visibility":"visible"});
37 })
38 $(".chooseCont_close").on("click",function(){
39     $(".subNav_chooseCont").css({"opacity":"0","visibility":"hidden"});
40 })
41 $(".chooseCont_list li").on("click",function(){
42     var currIndex=$(".chooseCont_list li").index(this);
43     $(".subNav_chooseCont").css({"opacity":"0","visibility":"hidden"});
44     $(".subNav_menu ul li").eq(currIndex).addClass("subNav_curr").siblings().removeClass("subNav_curr");
45     $('.subNav_menu ul li').eq(currIndex).trigger("click");
46 })

样式我就不写出来了，实现的效果如下：