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

来源：互联网发布：联动mpos 机报件软件编辑：程序博客网时间：2024/06/05 11:07

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

0 0