JS判断手势方向
JS判断手势方向
小小费FF 发表于1年前
JS判断手势方向
  • 发表于 1年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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>  
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 11
码字总数 4057
×
小小费FF
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: