swipe左右滑动

一、HTML

<nav class="branch_nav">

    <ul class="branch_swipe">

        <li>全球购</li>

        <li>母婴</li>

        <li>出行</li>

        <li>服务</li>

        <li>厨房</li>

        <li>饮食</li>

        <li >服用</li>

        <li>其他<li>

        <li>全球购</li>

    </ul>

</nav>

二、css

.branch_nav{

    width: 100%;

    height: rem(80);

    position: relative;

    overflow:hidden;

    border-top:rem(2) solid #D2D2D2;

    box-shadow: rem(670) 0 rem(80) rem(0)#F5F5F5 inset;

    padding-left:rem(25);

}

.branch_nav ul{

    display: flex;

    width:130%;

    margin-bottom: 0;

    position: absolute;

    left: 0;

}

.branch_nav ul li{

    height: rem(80);

    line-height: rem(80);

    flex-grow: 1;

    text-align: center;

    font-size: rem(22);

    box-sizing: border-box;

    list-style: none;

    color:#9D9D9D;

}

.branch_nav ul li:hover{

     color:#F96E9D;

    border-bottom:rem(4) solid #F96E9D;

}

三、js

（1）引入插件：

<script type="text/javascript" src="js/zepto.min.js"></script>

（2）jq代码：

//滑动nav：

$('.branch_swipe').swipeLeft(function(){

        $(this).animate({'left':-30 + '%'})

})

$('.branch_swipe').swipeRight(function(){

        $(this).animate({'left':0 + '%'})

})