手机网站

jquery touch事件 移动端判断手指上下左右滑动方向

位置:首页 > 手机网站 > 开发技巧,2018-03-26 09:24
jquery touch事件 移动端判断手指上下左右滑动方向,jquery touch事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.7.min"></script>
 
</head>
<body>
移动端,手指滑动屏幕查看效果。
 <script type="text/javascript">
    var windowHeight = $(window).height(),
    $body = $("body");
    $body.css("height", windowHeight);
    var startX, startY, moveEndX, moveEndY, X, Y;
 
    $("body").on("touchstart", function(e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove", function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
 
        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");
        }
    });
</script>
</body>
</html>

TAGS:jquery touch事件

猜你喜欢

本月热门的内容

最近更新的内容

NewHot