zoukankan      html  css  js  c++  java
  • 移动端判断滑动方向

     1 var startx, starty;
     2     //获得角度
     3     function getAngle(angx, angy) {
     4         return Math.atan2(angy, angx) * 180 / Math.PI;
     5     };
     6  
     7     //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
     8     function getDirection(startx, starty, endx, endy) {
     9         var angx = endx - startx;
    10         var angy = endy - starty;
    11         var result = 0;
    12  
    13         //如果滑动距离太短
    14         if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    15             return result;
    16         }
    17  
    18         var angle = getAngle(angx, angy);
    19         if (angle >= -135 && angle <= -45) {
    20             result = 1;
    21         } else if (angle > 45 && angle < 135) {
    22             result = 2;
    23         } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
    24             result = 3;
    25         } else if (angle >= -45 && angle <= 45) {
    26             result = 4;
    27         }
    28  
    29         return result;
    30     }
    31     //手指接触屏幕
    32     document.addEventListener("touchstart", function(e) {
    33         startx = e.touches[0].pageX;
    34         starty = e.touches[0].pageY;
    35     }, false);
    36     //手指离开屏幕
    37     document.addEventListener("touchend", function(e) {
    38         var endx, endy;
    39         endx = e.changedTouches[0].pageX;
    40         endy = e.changedTouches[0].pageY;
    41         var direction = getDirection(startx, starty, endx, endy);
    42         switch (direction) {
    43             case 0:
    44                 alert("未滑动!");
    45                 break;
    46             case 1:
    47                 alert("向上!")
    48                 break;
    49             case 2:
    50                 alert("向下!")
    51                 break;
    52             case 3:
    53                 alert("向左!")
    54                 break;
    55             case 4:
    56                 alert("向右!")
    57                 break;
    58             default:
    59         }
    60     }, false);
  • 相关阅读:
    day3
    day2
    day1-存储
    day5-iptables
    MySQL之补充
    11.18
    11.17
    junit基础学习之-测试controller层(2)
    junit基础学习之-简介(1)
    外键和级联
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/6589862.html
Copyright © 2011-2022 走看看