mobile端滑动屏幕事件

话不多少,直接上代码,请自测
HTML:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://hzimg.huizhuang.com/lib/jquery-2.1.0.min.js"></script>
</head><body>
    <div style="height: 500px;background-color:red "></div>
</body>

脚本:

//当开始触碰的时候:判断起始的坐标。
        $("div").on("touchstart", function(e) {
            e.preventDefault();    //阻止默认事件 冒泡 捕获等
            startX = e.originalEvent.changedTouches[0].pageX, //开始触碰坐标X轴位置
                    startY = e.originalEvent.changedTouches[0].pageY; //开始触碰坐标Y轴位置
        });
        //当开始滑动屏幕的时候:判断滑动结束坐标。
        $("div").on("touchmove", function(e) {
            e.preventDefault();    //阻止默认事件 冒泡 捕获等
            moveEndX = e.originalEvent.changedTouches[0].pageX,  //结束触碰坐标X轴位置
                    moveEndY = e.originalEvent.changedTouches[0].pageY, //结束触碰坐标Y轴位置
                    X = moveEndX - startX,  //结束X坐标减去开始X坐标
                    Y = moveEndY - startY;  //结束Y坐标减去开始Y坐标
//判断:如果左边距离大于0,或者大于上边滑动的距离。就视为往左滑动;同理判断上下左右。
            if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                alert("left 2 right");
            }
            else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                alert("right 2 left");
            }
            else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                alert("top 2 bottom");
            }
            else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                alert("bottom 2 top");
            }
            else{
                alert("just touch");
            }
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容