文档章节

JS判断手势方向

小小费FF
 小小费FF
发布于 2016/11/30 11:07
字数 371
阅读 6
收藏 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
使用BindingX开发客户端炫酷动画

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEn...

xiangzhihong
09/17
0
0
JS 原生触屏位置操作插件 - Sition.js

JS原生触屏位置操作插件 Sition 一款轻量级的移动触屏手势操作js插件,使用简单方便,支持多种判断操作 https://uquhu.cn 一款利用该插件打造的移动端手势音乐播放器(有点炫酷) https://gite...

love封尘
10/15
0
0
2016年10月15个最好的 JavaScript 库

1. g9 g9是一个JavaScript库,用于创建自动交互图形 2. CurrencyFormatter.js CurrencyFormatter.js允许用户将数字格式成各种不同的货币格式。它包含155种货币格式,可以处理异常格式化的货币...

pe_mail2006
2016/11/01
4.4K
8
android多点触摸手势&手势库GestureLibraries

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

IamOkay
2014/12/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
20分钟前
1
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
27分钟前
1
0
Windows / Linux / MacOS 设置代理上网的方法汇总

本文汇总了 Windows / Linux / MacOS 设置代理上网的各种方法,总结如下: 1、设置系统代理(Windows、Linux、MacOS) 2、设置代理插件(Chrome、Chromium、Firefox、Opera、QQ等浏览器) 3、...

sunboy2050
昨天
2
0
自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
昨天
2
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-clinpm install --save-dev babel-preset-es2015-node5 在项目目录创建两个文件夹 functional-playground ......

lilugirl
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部