zoukankan      html  css  js  c++  java
  • js-触屏滑动判断滑动方向(移动版)

    var startx, starty;
    //获得角度
    function getAngle(angx, angy) {
         return Math.atan2(angy, angx) * 180 / Math.PI;
    };

    //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
    function getDirection(startx, starty, endx, endy) {
        var angx = endx - startx;
        var angy = endy - starty;
        var result = 0;

    //如果滑动距离太短
    if(Math.abs(angx) < 2 && Math.abs(angy) < 2) {
        return result;
    }

    var angle = getAngle(angx, angy);
         if(angle >= -135 && angle <= -45) {
         result = 1;
    } else if(angle > 45 && angle < 135) {
         result = 2;
    } else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    } else if(angle >= -45 && angle <= 45) {
       result = 4;
    }

    return result;
    }
    //手指接触屏幕
    document.addEventListener("touchstart", function(e) {
       startx = e.touches[0].pageX;
       starty = e.touches[0].pageY;
    }, false);
    //手指离开屏幕
    document.addEventListener("touchend", function(e) {
       var endx, endy;
       endx = e.changedTouches[0].pageX;
       endy = e.changedTouches[0].pageY;
       var direction = getDirection(startx, starty, endx, endy);
       switch(direction) {
           case 0:
                alert("未滑动!");
                break;
          case 1:
                alert("向上!")
                break;
          case 2:
                alert("向下!")
                break;
          case 3:
                alert("向左!")
                break;
          case 4:
                alert("向右!")
                break;
         default:
        }
    }, false);

  • 相关阅读:
    UPNP报文示例
    ceph旧版客户端挂载新版ceph报错
    VUE——配置本地运行指定不同环境
    springBoot——Web开发简介【七】
    C++ 浮点数的存储与精度
    端口复用与惊群效应
    MySQL5.5读写分离之mysql-proxy
    Mysql读写分离--mysql-proxy
    mysql主从之keepalive+MySQL高可用
    如何在CentOS 7上安装Htop
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7762009.html
Copyright © 2011-2022 走看看