touchstart,touchmove判断手机中滑屏方向
滑动屏幕 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判断手机中滑屏方向的更多相关文章
- Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解
前言: 虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...
- Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明
今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...
- python3:判断手机的亮屏状态
在用python对手机做一些自动化操作时,常常会判断手机的亮屏状态,知晓手机的亮屏状态后才好做进一步的动作,如给屏幕解锁等. 用于了解手机的亮屏情况,有一个adb命令可用: adb shell du ...
- Android中滑屏实现----触摸滑屏以及Scroller类详解 .
转:http://blog.csdn.net/qinjuning/article/details/7419207 知识点一: 关于scrollTo()和scrollBy()以及偏移坐标的设置/取值问 ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- CSS3判断手机横屏竖屏
原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...
- Android 如何去掉手机中横竖屏切换时的转屏动画?
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- iOS判断手机中是否 有 SIM卡---备用
[CTSIMSupportGetSIMStatus() isEqualToString:kCTSIMSupportSIMStatusNotInserted]可以判断是否插入了sim卡. 前提是把下面的 ...
随机推荐
- 移动端自动化环境搭建-wxpython的安装
安装wxpython A.安装依赖 wxPython 是 Python 非常有名的一个 GUI 库,因为 RIDE 是基于这个库开发的,所以这个必须安装. B.安装过程 下载地址:http://www ...
- NSJSONSerialization 组json字符串
抄的网上的. 主要是组织列表部分 NSDictionary *song = [NSDictionary dictionaryWithObjectsAndKeys:",@"lengt ...
- Ansible playbook API 开发 调用测试
Ansible是Agentless的轻量级批量配置管理工具,由于出现的比较晚(13年)基于Ansible进行开发的相关文档较少,因此,这里通过一些小的实验,结合现有资料以及源码,探索一下Ansible ...
- IE8下标签float导致的bug。
前几天帮朋友写一个页面,今天在IE8下面发现一个很奇葩的问题,给a标签添加了float:left之后a标签内的图片不显示了,去掉float:left之后就能正常显示. 代码: <!DOCTYPE ...
- html5+css 图片自适应
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...
- 在centos配置nginx+php的环境
环境版本:centos6.8/nginx1.10.2/php5.6.29 ====================安装nginx1.10.2==================== #根据centos ...
- XML.04-dom4j和XPath
body,td { font-family: calibri; font-size: 10pt } XML.04-dom4j和XPath dom4j的基本使用 XPath 啥是XPath XPath语 ...
- ASP.NET Misconfiguration: Request Validation Disabled
Abstract: Use the ASP.NET validation framework to prevent vulnerabilities that result from unchecked ...
- type
MollyPages.org"You were wrong case.To live here is to live." Home Pages / Database / Forms ...
- bootstrap--小李子demo
最近忙啊...看到各位冬鞋都在认真写博客,认真敲代码,认真工作,总觉得自己时间太少,总觉得时间不够,老了...... 进正题: 上次不知从哪里(忘了)下载了bootstrap的一些使用小demo,以后 ...