判断手指上下左右滑动方向

简介: 判断手指上下左右滑动方向
<!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>判断手指左右滑动</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></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("左到右");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
            alert("右到左");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
            alert("上到下");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
            alert("下到上");
        }
        else{
            alert("just touch");
        }
    });
</script>
</body>
</html>
相关文章
|
1月前
ThreeJs的场景实现鼠标拖动旋转控制
这篇文章介绍了如何在Three.js中实现通过鼠标拖动来旋转场景中的模型,并提供了实现这一功能的代码示例。
76 0
求小球下落弹起的高度与路程
求小球下落弹起的高度与路程
113 0
|
开发工具
滑动拼图验证码滑动框样式设置
之前在某官网登录的时候有一个滑动拼图验证码,很好奇怎么去实现。然后就想着自己弄一个。同时我在想有没有办法可以修改滑动拼图的滑动框样式呢?然后让我找到了 KgCaptcha,下面我就简单介绍一下吧!
滑动拼图验证码滑动框样式设置
|
iOS开发
iOS开发 - ScrollView滚动时怎么判断滚动停止及滚动的方向
iOS开发 - ScrollView滚动时怎么判断滚动停止及滚动的方向
893 0
|
算法 Java C++
算法题:笨拙的手指
题目来源:AcWing2058 奶牛贝茜正在学习如何在不同进制之间转换数字。 但是她总是犯错误,因为她无法轻易的用两个前蹄握住笔。
88 0
|
XML Android开发 数据格式
Activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现---Android提高篇
Activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现---Android提高篇
1152 0
|
JavaScript 小程序
移动端判断手指的滑动方向
移动端判断手指的滑动方向
C# 获取当前屏幕的宽高和位置
原文:C# 获取当前屏幕的宽高和位置 上一篇博客《C# 获取当前屏幕DPI》,介绍了如何获取当前屏幕的DPI设置 本章主要介绍如何获取当前窗口所在屏幕的信息 当前屏幕信息 如果当前是单屏幕,可以直接获取主屏幕 var primaryScreen = Screen.
1298 0