文档章节

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
昨天
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

没有更多内容

加载失败,请刷新页面

加载更多

为什么Java大神,都在看Spring Boot和Spring Cloud的书?

如果你是一名Java开发人员,并且最近正打算学习Spring Boot和Spring Cloud框架并寻找一些关于它们的最好的书籍,那么,你今天就来对地方了。 本文,我们将讨论一些学习Spring Boot和Spring ...

Java小铺
31分钟前
9
0
springboot logback日志配置

springboot 如果不使用外部tomcat的话,日志是需要自己配置的,不然的话就只有控制台的日志,但是日志又是我们在项目上了生产环境,出问题时,检查问题的唯一途径,所以我们要配置详细的日志...

曾大大胖
31分钟前
2
0
Linux服务器集体篡改时间的方法

Red Hat 虚拟化课程RH318,中小型公司使用的话,感觉可以匹敌OpenStack。手头上有一个VMware的映像,RHEV 3.5版的,只能把系统时间调整到2016年才能使用。Red Hat的RHEV已经更新到4.1版,不过...

大别阿郎
31分钟前
2
0
Tomcat启动异常:java.lang.ClassNotFoundException

警告: Name = mysqlDataSource Property maxActive is not used in DBCP2, use maxTotal instead. maxTotal default value is 8. You have set value of "100" for "maxActive" property, wh......

hengbao5
33分钟前
1
0
GO错误的一些处理(defer,recover,panic)

package main import("fmt""errors")func main() {num := 10fmt.Printf("num的类型%T, num的值%v, num的地址%v\n", num, num, &num)num2 := new(int) //返回一个指针//num...

汤汤圆圆
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部