touchstart ,touchmove, touchend 页面随手指滑动

最新推荐文章于 2024-08-11 20:48:15 发布

info_

最新推荐文章于 2024-08-11 20:48:15 发布

阅读量7.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/info_/article/details/51679006

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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();
            }
        }
}