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);

  • 相关阅读:
    atom 震动特效
    CSRF和XSS
    解决remove @override annotation(jdk1.5和jdk1.6)
    JDK 工具列表
    解决Win10系统backgroundTaskHost占用cpu大
    ideaIU-15.0.2 注册码
    jprofiler_windows-x64_9_1注册码
    修改ligerui 默认确认按钮
    解决 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”
    安装 Flex2packagebeta_1.994
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7762009.html
Copyright © 2011-2022 走看看