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

js判断触摸方向的更多相关文章

  1. 移动端JS判断手势方向

    原生JS判断手势方向的解决思路: 1.滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半 ...

  2. 移动应用滑动屏幕方向判断解决方案,JS判断手势方向

    问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...

  3. js判断滚动方向

     //页面滚动监听事件     window.onscroll = function (e) {                scrollFunc();         $("#t&quo ...

  4. Unity3D判断触摸方向

    据说 Temple Run(神庙逃亡) 就是用这种方式操作的 废话不多说 直接上代码 using UnityEngine; using System.Collections; public class ...

  5. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  6. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  7. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  8. js判断本机是否已安装app

    需求:在浏览器或者app webview中打开的页面,js判断本机是否已安装搜狐新闻客户端. 一.微信 1.分享——好友/朋友圈,feed会有搜狐新闻标记,打开url后缀参数isappinstalle ...

  9. js判断网页是否加载完毕 包括图片

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

随机推荐

  1. Eclipse平台下配置Go语言开发环境(Win7)

    <Go语言编程>中写到:“从功能和易用性等方面考虑, Eclipse+GoEclipse.LiteIDE这两个环境在所有IDE里面是表现最好的”,所以笔者打算采用Eclipse+GoEcl ...

  2. Java高质量代码之 — 泛型与反射

    在Java5后推出了泛型,使我们在编译期间操作集合或类时更加的安全,更方便代码的阅读,而让身为编译性语言的Java提供动态性的反射技术,更是在框架开发中大行其道,从而让Java活起来,下面看一下在使用 ...

  3. JMeter的使用——ApacheJMeterTemporaryRootCA.crt的用法

    在使用JMeter的时候,启动HTTP代理服务器弹出的那个提示框一直不知道是什么意思,刚刚弄明白了,在JMeter2.1之后,通过JMeter的代理服务器来访问https安全连接的网页的时候,浏览器会 ...

  4. 网站Seo纲领

    1:准备工作和内容来源 2:域名注册 3:网站设计越简单越好 4:内容长度 5:四处一词 6:站内定向锚文本 7:内容编辑标准 8:外链建设 9:日志分析能力 10:更新频率和高质量的内容 1:准备工 ...

  5. loj#6041. 「雅礼集训 2017 Day7」事情的相似度(后缀自动机+启发式合并)

    题面 传送门 题解 为什么成天有人想搞些大新闻 这里写的是\(yyb\)巨巨说的启发式合并的做法(虽然\(LCT\)的做法不知道比它快到哪里去了--) 建出\(SAM\),那么两个前缀的最长公共后缀就 ...

  6. The server of Apache (一)——apache服务的基本安装过程

    一.为了避免端口冲突,需要卸载linux系统中以RPM方式安装的httpd ~] # rpm -qa | grep httpd ~] # rpm -e httpd --nodeps (此处nodeps ...

  7. Phpstudy+WordPress安装详解

    Phpstudy+WordPress安装详解 1.安装phpStudy程序 将下载的phpStudy程序解压到某个分区的根目录中,第一次使用会提示你初始化一下: 之后在主控制界面点击启动即可. php ...

  8. .NET Core 版本不支持的问题

    分析一个.NET Core开源项目(Ocelot),打开后发现提示当前版本.NET Core 不支持. 错误信息如下: The current .NET SDK does not support ta ...

  9. opencv学习笔记1

    #对图像的像素处理#法1print("------------------------")image = cv.imread("D:/1.jpeg",cv.IM ...

  10. VS2013过期激活

    然后点击"更改我的产品许可证",输入密钥  : BWG7X-J98B3-W34RT-33B3R-JVYW9 即可注册成功...