英雄聯(lián)盟周邊商城服飾上新時雅任，有做一個移動端姐仅，首頁翻屏肾档，但是后面都是滾動效果的
touch事件分三步。touchstart,touchmove,touchend

<div class="g-wrap">
    <div class="top">
     //需要翻屏的首頁
    </div>
    <div class="g-main">
        <a name="content"></a>
        //滾動的內(nèi)頁
    </div>
</div>
<script>
    var annzmy= {
        init: function () {
            var winH = $(window).height();//獲取頁面高度
            var obj_= $('.top');//整屏部分
            var scllObj = $('.g-wrap');//整個頁面
            var sY,sMove,sEnd,contrast;
            //整屏部分綁定觸摸touchstart事件
            obj_.bind('touchstart',function(e){
                var evt = e ? e:window.event;
                evt.preventDefault();//阻止元素默認事件冒泡
                var touch = evt.touches[0];//獲取第一個觸點
                sY = touch.clientY;//頁面觸點的Y坐標
                scllObj.css({
                    'transition':'none'
                })
            });
            //滑動事件躬翁，頁面滑動的效果
            obj_.bind('touchmove',function(e) {
                var evt = e ? e:window.event;
                evt.preventDefault();
                var touch = evt.touches[0];
                sMove = touch.clientY;//獲取滑動時的Y坐標
                scllObj.css({
                    'transform':'translateY(' + (sMove - sY) + 'px)',//滑動此時的坐標-開始觸摸的坐標=回正所需位移
                    'transition':'none'
                })
            });
            //觸摸結束
            obj_.bind('touchend',function(e){
                var evt = e ? e:window.event;
                var touch = evt.changedTouches[0];
                sEnd = touch.clientY;
                contrast =  sEnd - sY;//結束時的坐標-開始時的坐標
                if(contrast > -120){
                    scllObj.css({
                        'transform':'translateY(0px)',
                        'transition':'.3s'
                    })
                }else{
                    scllObj.css({
                        'transform':'translateY(-100vh)',//滑動查過一定距離拜轨，翻屏
                        'transition':'.3s',
                        'margin-bottom': '-100vh'
                    })
                }
            });

            //內(nèi)容滑動
            $('.g-main').on('touchstart',function (e) {
                var evt = e ? e:window.event;
                var touch = evt.touches[0];
                sY = touch.clientY
            });
            $('.g-main').on('touchmove',function (e) {
                var evt = e ? e:window.event;
                var touch = evt.touches[0];
                sMove = touch.clientY;
                var movePx = sMove - sY;//移動的距離，大于零代表向下
                var contTop = $('a[name=content]').offset().top;//此頁面頂點距離窗口頂部的距離
               
                if(contTop >= 0 && movePx > 10){
                    evt.preventDefault();
                    scllObj.css({
                        'transform':'translateY(-' + (winH - movePx) + 'px)',
                        'transition':'none'
                    })
                }
            });
            $('.g-main').on('touchend',function (e) {
                var evt = e ? e : window.event;
                var touch = evt.changedTouches[0];
                sEnd = touch.clientY;
                var movePx = sEnd - sY;
                var contTop = $('a[name=content]').offset().top;
                if (contTop >= 0 && movePx > 120) {
                    scllObj.css({
                        'transform': 'translateY(0px)',
                        'transition': '.3s'
                    })
                } else {
                    scllObj.css({
                        'transform': 'translateY(-100vh)',
                        'transition': '.3s'
                    })
                }
            });
        }
    };
    $(function () { annzmy.init(); });
</script>