html：
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 })
样式我就不写出来了，实现的效果如下：
