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

  • 相关阅读:
    C# 缓存介绍与演示(转)
    sql server 2005中表的数据与excel互相导入导出的方法
    java.exe,javac.exe,javaw.exe,jar,javadoc 区别
    C# 装箱和拆箱、理论概念(非原创)
    Maven概述(非原创)
    理解java String(非原创)
    JVM JRE JDK区别于联系(非原创)
    LINQ to SQL与LINQ to Entities场景之对照(非原创)
    J2EE系统开发环境配置
    ASP.NET MVC 拦截器(转)
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7762009.html
Copyright © 2011-2022 走看看