文档章节

JS判断手势方向

小小费FF
 小小费FF
发布于 2016/11/30 11:07
字数 371
阅读 6
收藏 0
点赞 0
评论 0

1、滑动屏幕事件使用Html5 的touchstart滑动开始事件和touchend滑动结束事件。

2、方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半轴计算角度;我们以45度角为方向分割线,如:只要滑动角度大于等于45度且小于135度,则判断它方向为向上滑。

3、使用Math.atan2来计算起点与终点形成的直线角度。

4、仔细对比标准坐标系与屏幕坐标系,我们发现,标准坐标系,上半轴为负值,要实现转换,只需要调换Y坐标起点与终于位置即可。

 

  1. <script>  
  2.   
  3.           //返回角度  
  4.           function GetSlideAngle(dx, dy) {  
  5.               returnMath.atan2(dy, dx) * 180 / Math.PI;  
  6.           }  
  7.    
  8.           //根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动  
  9.           function GetSlideDirection(startX, startY, endX, endY) {  
  10.               var dy = startY - endY;  
  11.               var dx = endX - startX;  
  12.               varresult = 0;  
  13.    
  14.               //如果滑动距离太短  
  15.               if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {  
  16.                   returnresult;  
  17.               }  
  18.    
  19.               varangle = GetSlideAngle(dx, dy);  
  20.               if(angle >= -45 && angle < 45) {  
  21.                   result = 4;  
  22.               }else if (angle >= 45 && angle < 135) {  
  23.                   result = 1;  
  24.               }else if (angle >= -135 && angle < -45) {  
  25.                   result = 2;  
  26.               }  
  27.               else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {  
  28.                   result = 3;  
  29.               }  
  30.    
  31.               returnresult;  
  32.           }  
  33.    
  34.           //滑动处理  
  35.           var startX, startY;  
  36.           document.addEventListener('touchstart',function (ev) {  
  37.               startX = ev.touches[0].pageX;  
  38.               startY = ev.touches[0].pageY;    
  39.           }, false);  
  40.           document.addEventListener('touchend',function (ev) {  
  41.               var endX, endY;  
  42.               endX = ev.changedTouches[0].pageX;  
  43.               endY = ev.changedTouches[0].pageY;  
  44.               var direction = GetSlideDirection(startX, startY, endX, endY);  
  45.               switch(direction) {  
  46.                   case 0:  
  47.                       alert("没滑动");  
  48.                       break;  
  49.                   case 1:  
  50.                       alert("向上");  
  51.                       break;  
  52.                   case 2:  
  53.                       alert("向下");  
  54.                       break;  
  55.                   case 3:  
  56.                       alert("向左");  
  57.                       alert("!");  
  58.                       break;  
  59.                   case 4:  
  60.                       alert("向右");  
  61.                       break;  
  62.                   default:             
  63.               }  
  64.           }, false);  
  65.      
  66.             
  67.       </script>  

© 著作权归作者所有

共有 人打赏支持
小小费FF
粉丝 0
博文 12
码字总数 4980
作品 0
北京
基于 BindingX 的富交互解决方案

基于 BindingX 的富交互解决方案 BindingX 官网: https://alibaba.github.io/bindingx/ BindingX 项目地址: https://github.com/alibaba/bindingx 一. 背景 在 Weex 环境下实现一些复杂的手势...

作者: 楚奕
05/31
0
0
android多点触摸手势&手势库GestureLibraries

一.手势事件的监听方式 1.使用 onTouchEvent事件监听器或者使用 setOnTouchEventListener监听触摸事件 2.事件类型的判断 event.getAction()或者event.getActionMask(),注意,前者包含后者,后...

IamOkay
2014/12/17
0
0
超越Web,Javascript在物联网的应用

引子 Patrick Catanzariti 是一名Web开发工程师,最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》,介绍了JavaScript在物联网中的应用,非常有意思。做为JavaScript的爱好者...

葡萄城控件技术团队
2014/10/15
0
1
弹窗组件 Layx v2.2.5 稳定版发布,支持触摸屏操作!

Layx 一款再熟悉不过的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 内置特性 纯原生Javascript实现,不依赖任何第三方框架 支持IE10+(含IE10)、Chrome、Firefox、Opera、Edge等主流浏览...

百小僧
05/28
0
0
iOS一些代码的取巧写法总结(二)

一、在xib/storyboard里面设置view圆角半径 在xib/storyboard里面设置view圆角半径 神奇的IB_DESIGNABLE和IBInspectable(xib中设置圆角) 二、push pop 动画突然消失的解决方案 产生的原因是动...

朝雨晚风
2016/12/05
0
0
JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪
05/29
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
0
0
爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137
06/05
0
0
由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin
06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
10分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
27分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
44分钟前
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部