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

js-触屏滑动判断滑动方向(移动版)的更多相关文章

  1. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  2. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  3. js触屏事件

    js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...

  4. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  5. html5 touch事件实现触屏页面上下滑动(一)

    最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

  6. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  7. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  9. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Leetcode 75. 颜色分类

    题目链接 https://leetcode-cn.com/problems/sort-colors/description/ 题目描述 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们 ...

  2. Java装饰者模式(Decorator)

    一.定义 装饰模式的设计理念主要是以对客户端透明的方式动态扩展对象的功能,是继承关系的一个替代(继承会产生大量的子类,而且代码有冗余).装饰模式可以在不创造更多子类的情况下,将对象的功能加以扩展.装饰 ...

  3. Python 实战一

    列表ID的显示 起初ID显示的是数据库中的id,因为数据库中的id是自增长的,所以删除一条后,这里显示就叉开了,这里使用索引的方式来显示. 这个功能实现的逻辑: 第一:定义一个表格的架构,用id=‘i ...

  4. cache共享问题

    经测试发现,cache在web中与windows service中是不能共享的.但在windows service可以使用cache.

  5. 融合RocksDB, Pregel, Foxx & Satellite Collections 怎样使数据库性能提升35%?

    经过数月的研发测评,开源多模型数据库ArangoDB 终于发布了其 3.2 正式版,该版本消除了两个重大的障碍,添加了一个期待已久的功能,还集成了一个有趣的功能.此外,官方团队表示新版本将 Arang ...

  6. Wannafly挑战赛5

    珂朵莉与宇宙 时间限制:C/C++ 2秒,其他语言4秒空间限制:C/C++ 65536K,其他语言131072K64bit IO Format: %lld 题目描述 星神是来自宇宙的 所以珂朵莉也是吧 ...

  7. Welcome-to-Swift-17自判断链接(Optional Chaining)

    自判断链接(Optional Chaining)是一种可以请求和调用属性.方法及子脚本的过程,它的自判断性体现于请求或调用的目标当前可能为空(nil).如果自判断的目标有值,那么调用就会成功:相反,如 ...

  8. Welcome-to-Swift-08枚举 (Enumerations)

    枚举为一系相关联的值定义了一个公共的组类型.同时能够让你在编程的时候在类型安全的情况下去使用这些值. 如果你对C语言很熟悉,你肯定知道在C语言中枚举类型就是一系列具有被指定有关联名称的的整数值.但在S ...

  9. 【bzoj4459】[Jsoi2013]丢番图 分解质因数

    题目描述 丢番图是亚历山大时期埃及著名的数学家.他是最早研究整数系数不定方程的数学家之一.为了纪念他,这些方程一般被称作丢番图方程.最著名的丢番图方程之一是x^N+y^n=z^N.费马提出,对于N&g ...

  10. 【Luogu】P3745期末考试(三分)

    题目链接 我是怎么把“期末考试”在本地写成“假期计划”的 qwq???? 本题把学生和卷子都排个序,按出成绩最晚时间三分. 三分之后可以O(n)的时间统计答案,因为修改卷子出成绩的时间可以贪心计划. ...