设为首页收藏本站心情墙手机版 今天是: 2024-05-18    "国际博物馆日"  了解博物馆,更好地发挥博物馆的社会功能
天气与日历 切换到宽版

 找回密码
 立即注册
搜索
查看: 448|回复: 0

[JavaScript] js判断手指滑动(判断手机上下左右屏幕滑动事件)

[复制链接]
  • 打卡等级:LV7

455

主题

30

回帖

24万

积分

管理员

积分
247259

突出贡献荣誉管理论坛元老本科学士学位拥有劳力士宇宙计型迪通拿系列m116515ln-0059拥有欧米茄星座系列131.23.41.21.03.001拥有梅赛德斯-奔驰EQS 580 4MATIC拥有宝马M8四门轿跑车 雷霆版

QQ

皮卡丘 Lv:40
发表于 2023-1-5 16:28:17 | 显示全部楼层 |阅读模式 IP:北京朝阳
js判断手指滑动方向(移动端),判断手机屏幕上手指的上滑、下滑、左滑、右滑操作并提示

方法1:
  1. var startx, starty;
  2.     //获得角度
  3.     function getAngle(angx, angy) {
  4.         return Math.atan2(angy, angx) * 180 / Math.PI;
  5.     };

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

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

  15.         var angle = getAngle(angx, angy);
  16.         if (angle >= -135 && angle <= -45) {
  17.             result = 1;
  18.         } else if (angle > 45 && angle < 135) {
  19.             result = 2;
  20.         } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
  21.             result = 3;
  22.         } else if (angle >= -45 && angle <= 45) {
  23.             result = 4;
  24.         }

  25.         return result;
  26.     }
  27.     //手指接触屏幕
  28.     document.addEventListener("touchstart", function(e) {
  29.         startx = e.touches[0].pageX;
  30.         starty = e.touches[0].pageY;
  31.     }, false);
  32.     //手指离开屏幕
  33.     document.addEventListener("touchend", function(e) {
  34.         var endx, endy;
  35.         endx = e.changedTouches[0].pageX;
  36.         endy = e.changedTouches[0].pageY;
  37.         var direction = getDirection(startx, starty, endx, endy);
  38.         switch (direction) {
  39.             case 0:
  40.                 alert("未滑动!");
  41.                 break;
  42.             case 1:
  43.                 alert("向上!")
  44.                 break;
  45.             case 2:
  46.                 alert("向下!")
  47.                 break;
  48.             case 3:
  49.                 alert("向左!")
  50.                 break;
  51.             case 4:
  52.                 alert("向右!")
  53.                 break;
  54.             default:
  55.         }
  56.     }, false);
复制代码
  1.     $("body").on("touchstart", function(e) {
  2.     e.preventDefault();
  3.     startX = e.originalEvent.changedTouches[0].pageX,
  4.     startY = e.originalEvent.changedTouches[0].pageY;
  5.   });
  6.   $("body").on("touchmove", function(e) {
  7.     e.preventDefault();
  8.     moveEndX = e.originalEvent.changedTouches[0].pageX,
  9.     moveEndY = e.originalEvent.changedTouches[0].pageY,
  10.     X = moveEndX - startX,
  11.     Y = moveEndY - startY;
  12.     if ( X > 0 ) {
  13.         //右滑
  14.       alert("left 2 right");
  15.     }
  16.     else if ( X < 0 ) {
  17.         //左滑
  18.       alert("right 2 left");
  19.     }
  20.     else if ( Y > 0) {
  21.         //下滑
  22.       alert("top 2 bottom");
  23.     }
  24.     else if ( Y < 0 ) {
  25.         //上滑
  26.       alert("bottom 2 top");
  27.     }
  28.     else{
  29.       alert("just touch");
  30.     }
  31.    });
复制代码


急躁,是因为经历不够,轻浮,是因为磨练不够,烦乱,是因为思路不清,压力,是因为格局不够,恐惧,是因为假想太多,在这个薄凉的世界,自己不强大,一切都是浮云 ...
懒得打字嘛,点击右侧快捷回复 【乱回复纯数字纯字母将禁言】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|社区规范|绵羊优创 ( 京ICP备19037745号-2 )|网站地图

公安备案京公网安备11011502037529号

GMT+8, 2024-5-18 17:08 , Processed in 1.305584 second(s), 20 queries , MemCache On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表