touchstart ,touchmove, touchend 頁面隨手指滑動

<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><span style="font-size:32px;">js寫法</span>

</pre><pre code_snippet_id="1717282" snippet_file_name="blog_20160615_3_9095677" name="code" class="html">

//詳情頁滑出效果
function swipePage(){//頁面滑動切換效果
        //$("#goodsdetil").animate({right:-(e.pageX)}/*,400,function(){$("#goodsMealDiv").empty();}*/);
        //$('body').css("overflow","hidden");
        $('body').on('touchmove', function (event) {//禁止瀏覽器上下滑動
            event.preventDefault();
        });
        var startX, startY, endX, endY;
        var showADID = 1;
        document.getElementById("goodsdetil").addEventListener("touchstart", touchStart, false);
        document.getElementById("goodsdetil").addEventListener("touchmove", touchMove, false);
        document.getElementById("goodsdetil").addEventListener("touchend", touchEnd, false);
        function touchStart(event) {
            var touch = event.touches[0];
            startY = touch.pageY;
            startX = touch.pageX;
        }
        function touchMove(event) {
            var touch = event.touches[0];
            endX = touch.pageX;
            //console.log("X軸移動大小：" + (startX - endX));
            if((startX - endX)<0){
                $("#goodsdetil").animate({right:(startX - endX)},0);
            }
        }
        function touchEnd(event) {
            if((startX - endX)>-300){
                $("#goodsdetil").animate({right:"0px"},300);
            }else if((startX - endX)<-300){
                pageHide();
            }
        }
}

jQuery 寫法

function swipePage(){//頁面滑動切換效果
        //$("#goodsdetil").animate({right:-(e.pageX)}/*,400,function(){$("#goodsMealDiv").empty();}*/);
        //$('body').css("overflow","hidden");
        $('body').on('touchmove', function (event) {//禁止瀏覽器上下滑動
            event.preventDefault();
        });
        var startX, startY, endX, endY;
        $("#goodsdetil").bind("touchstart", touchStart);
        $("#goodsdetil").bind("touchmove", touchMove);
        $("#goodsdetil").bind("touchend", touchEnd);
        function touchStart(event) {
            var touch = event.originalEvent.targetTouches[0];
            startY = touch.pageY;
            startX = touch.pageX;
        }
        function touchMove(event) {
            var touch = event.originalEvent.targetTouches[0];
            endX = touch.pageX;
            //console.log("X軸移動大小：" + (startX - endX));
            if((startX - endX)<0){
                $("#goodsdetil").animate({right:(startX - endX)},0);
            }
        }
        function touchEnd(event) {
            if((startX - endX)>-300){
                $("#goodsdetil").animate({right:"0px"},300);
            }else if((startX - endX)<-300){
                pageHide();
            }
        }
}