快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

移动端触屏判断手势方向简单介绍

2017-6-19 21:18| 发布者: admin| 查看: 218| 评论: 0|来自: 蚂蚁部落

下面的效果可以在谷歌控制台下模拟移动端方式测试。

实现原理如下:

(1).使用Math.atan2来计算起点与终点形成的直线角度。

(2).方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半轴计算角度;我们以45度角为方向分割线,如:只要滑动角度大于等于45度且小于135度,则判断它方向为向上滑。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/19/211855tgce6loemlexc3nf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  margin: 20px 0;
  font-size: 18px;
}
#container {
  width: 100%;
  height: 420px;
  background-color: #1AC78C;
}
</style>
</head>
<body>
<div>
  <h3>触摸开始</h3>
  <p>触摸方向为:<span id="direction"></span></p>
</div>
<div id="container"></div>
<script>
var container = document.getElementById("container");
var direction = document.getElementById("direction");
var start_x;
var start_y;
var end_x;
var end_y;
container.addEventListener("touchstart", function(event) {
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    start_x = touch.pageX;
    start_y = touch.pageY;
  };
});
container.addEventListener("touchmove", function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    move_x = touch.pageX;
    move_y = touch.pageY;
  };
});
container.addEventListener("touchend", function(event) {
  if (event.changedTouches.length == 1) {
    var touch = event.changedTouches[0];
    end_x = touch.pageX;
    end_y = touch.pageY;
  };
  var directionMsg = "";
  var numRange = 20;
  if (start_x - end_x > numRange) {
    directionMsg += "左";
  } else if (start_x - end_x < -numRange) {
    directionMsg += "右";
  }
 
  if (start_y - end_y > numRange) {
    directionMsg += "上";
  } else if (start_y - end_y < -numRange) {
    directionMsg += "下";
  }
  direction.innerHTML = directionMsg;
});
</script>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-27 16:36 , Processed in 0.060635 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部