滑动屏幕    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. Appium UI自动化的那些梗

    @作者 彭海波 转载请注明出处 前言 由于需求的快速迭代和敏捷测试的要求,在测试过程中引入自动化成为必不可少的手段.作为一个互联网测试团队,我们自然也引入了自动化测试这个环节.在众多的测试框架中,我们 ...

  2. 云时代的分布式数据库:阿里分布式数据库服务DRDS

    发表于2015-07-15 21:47| 10943次阅读| 来源<程序员>杂志| 27 条评论| 作者王晶昱 <程序员>杂志数据库DRDS分布式沈询 摘要:伴随着系统性能.成 ...

  3. kaggle& titanic代码

    这两天报名参加了阿里天池的’公交线路客流预测‘赛,就顺便先把以前看的kaggle的titanic的训练赛代码在熟悉下数据的一些处理.题目根据titanic乘客的信息来预测乘客的生还情况.给了titan ...

  4. Convert HTML to Text(转载)

    原文地址:http://www.blackbeltcoder.com/Articles/strings/convert-html-to-text  Download Source Code Intro ...

  5. 微服务实战系列--Nginx官网发布(转)

    这是Nginx官网写的一个系列,共七篇文章,如下 Introduction to Microservices (this article) Building Microservices: Using ...

  6. Nginx系列一:信号与配置

    一.Nginx与信号 Nginx支持平滑重启,相比于Apache,修改了配置文件后可以不需要先停止程序,再重新启动. 1.启动 nginx –c nginx.conf 其中,-c nginx.conf ...

  7. VI的一些快捷键

    . $ ctags –R --c-types=+px ($ 为Linux系统Shell提示符) .$ vi –t tag (请把tag替换为您欲查找的变量或函数名) .:ts (ts 助记字:tags ...

  8. MySQL 第二篇

    一.MySQL多实例介绍 mysql多实例,共用一套mysql安装程序,使用不同的配置文件(my.cnf).启动程序.和数据文件,即在一台服务器上同时开启多个不同的服务器端口(3306,3307),同 ...

  9. SQL中判断一串字符中是否有特定的字符

    ),) SET @s='1,2,3,4,5,6,7,8,9,10' 一:SET @sql='select col='''+ replace(@s,',',''' union all select '' ...

  10. lisp中的nil

    ANSI Common Lisp 第二章 课后习题 7.只使用本章所介绍的操作符,定义一个函数,它接受一个列表作为实参,如果有一个元素是列表时,就返回真. (defun have-list (lst) ...