滑动屏幕    touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发

首先获取手接触屏幕时的坐标X,Y

//获取接触屏幕时的X和Y
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});

然后获取滑动的坐标,并使用后面的坐标减去前面的坐标,通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的,所以可使用Math.abs()进行比较,比如:像右上角滑动,当往上滑动的距离大于往右的距离时,取其往上滑动的距离,即往上滑动。

$('body').bind('touchmove',function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
console.log('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
console.log('往左滑动');
}else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
console.log('往上滑动');
}else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
console.log('往下滑动');
}else{
console.log('点击未滑动');
} });

touchstart,touchmove判断手机中滑屏方向的更多相关文章

  1. Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解

    前言:  虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...

  2. Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明

    今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...

  3. python3:判断手机的亮屏状态

    在用python对手机做一些自动化操作时,常常会判断手机的亮屏状态,知晓手机的亮屏状态后才好做进一步的动作,如给屏幕解锁等.  用于了解手机的亮屏情况,有一个adb命令可用: adb shell du ...

  4. Android中滑屏实现----触摸滑屏以及Scroller类详解 .

    转:http://blog.csdn.net/qinjuning/article/details/7419207 知识点一:  关于scrollTo()和scrollBy()以及偏移坐标的设置/取值问 ...

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

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

  6. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  7. CSS3判断手机横屏竖屏

    原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...

  8. Android 如何去掉手机中横竖屏切换时的转屏动画?

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  9. iOS判断手机中是否 有 SIM卡---备用

    [CTSIMSupportGetSIMStatus() isEqualToString:kCTSIMSupportSIMStatusNotInserted]可以判断是否插入了sim卡. 前提是把下面的 ...

随机推荐

  1. VAssistX使用小窍门

    日常使用中的一些VAssistX使用小窍门,简单总结下 一,修改VAssistX默认缓存文件路径,防止默认C盘被占用空间过大 1.  打开注册表HKCU\Software\Whole Tomato,新 ...

  2. maven出现 -Dmaven.multiModuleProjectDirectory system propery错误

    1.使用myeclipse10整合maven插件时出现错误: -Dmaven.multiModuleProjectDirectory system propery is not set. Check ...

  3. AJAX实现跨域的三种种方法(代理,JSONP,XHR2)

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...

  4. Python实现插件机制——自动import一个目录下的所有.py文件

    假设有这样一个目录结构: /src          main.py          /plugins                __init__.py                a.py  ...

  5. linux命令行下载jdk

      官网JDK7下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 在里面 ...

  6. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  7. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  8. 介绍开源的.net通信框架NetworkComms框架之四 消息边界

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  9. JDK和Tomcat环境变量,以及用MyEclipse新建Web Project测试Tomcat Server

    [请尊重原创版权,如需引用,请注明来源及地址] 在此之前一直用的Eclipse挺顺手的,今天突然想换MyEclipse试试,不知安装MyEclipse的时候我选错了什么选项,反正JDK和Tomcat的 ...

  10. python 连接redis工具类

    #!/usr/bin/python # coding=utf-8 __author__ = 'shuangjiang' import redis import sys default_encoding ...