移动端左右滑动菜单

小二儿，上代码~

/* 左右滑动菜单 */
.m-menu{overflow:hidden;}
.m-menu .m-menu-cnt{width:100%;height:40px;background:#fff;margin:0 auto;text-align:left;font-size:0;overflow:hidden;}
.m-menu a{display:inline-block;box-sizing:border-box;padding:0 10px;line-height:40px;font-size:.14rem;color:#333;}

<div class="m-menu">
    <div class="m-menu-box">
        <div class="m-menu-cnt">
            <a href="http://m.xiaoma.com/">托福保分</a>
            <a href="http://m.xiaoma.com/satbf/">SAT保分</a>
            <a href="http://m.xiaoma.com/jj/">托福机经</a>
            <a href="javascript:void(0);">5980元</a>
            <a href="http://m.xiaoma.com/tftpo/">TPO </a>
            <a href="http://m.xiaoma.com/pzkq/">600冲刺</a>
            <a href="http://m.xiaoma.com/cchd/">最新活动</a>
            <a href="http://m.xiaoma.com/tfpx/">培训</a>
        </div>
    </div>
</div>

// 左右滑动菜单
var nav_scroll ={
    outer:null,
    $inner:null,
    hidden_width:0,
    current_x:0,
    start_x:0,
    scale:1,
    distance:0,
    init:function(outer,inner){
        var self =this;
        self.outer = $(outer)[0];
        self.$inner = $(inner);
        var inner_width = 0;
        self.$inner.children().each(function(){
            inner_width += $(this).outerWidth();
        });
        self.hidden_width = inner_width-$(self.outer).width();
        self.$inner.width(inner_width+1);
        self.outer.addEventListener('touchstart', self.eventlistener, false);
    },
    eventlistener:{
        handleEvent: function(event) {
          switch (event.type) {
            case 'touchstart': this.start(event); break;
            case 'touchmove': this.move(event); break;
            case 'touchend': this.end(event); break;
          }
        },
        start:function(){
            nav_scroll.start_x = event.touches[0].pageX;
            nav_scroll.outer.addEventListener('touchmove', this, false);
        },
        move:function(){
            var this_e = event || window.event;
            this_e.preventDefault();
            this_e.stopPropagation()
            nav_scroll.move_x = event.touches[0].pageX;
            nav_scroll.current_x = nav_scroll.current_x+nav_scroll.move_x-nav_scroll.start_x;
            nav_scroll.start_x = nav_scroll.move_x;
            nav_scroll.transform();
        },
        end:function(){
            nav_scroll.outer.removeEventListener('touchmove', this, false)
            nav_scroll.outer.removeEventListener('touchend', this, false)
        }
    },
    transform:function(x){
        var self =this;
        if(-nav_scroll.current_x>=self.hidden_width){
            if(-nav_scroll.current_x===self.hidden_width){
                return null;
            }
            nav_scroll.current_x = -self.hidden_width;
        }
        else if(nav_scroll.current_x>=0){
            if(nav_scroll.current_x===0){
                return null;
            }
            nav_scroll.current_x =0;
        }
        $(self.outer).css('-webkit-transform','translateX('+nav_scroll.current_x+'px)');
    }
}
nav_scroll.init('.m-menu-box','.m-menu-cnt');