模仿今日头条导航栏滑动显示更多
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 })
样式我就不写出来了，实现的效果如下：
