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

快乐打工仔 分类:实例代码

移动端触屏判断手势方向简单介绍属于前端实例代码,有关更多实例代码大家可以查看

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

实现原理如下:

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

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

图示如下:

前端教程

代码实例如下:

<!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.pipipi.net/" />
<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>

移动端触屏判断手势方向简单介绍,这样的场景在实际项目中还是用的比较多的,关于移动端触屏判断手势方向简单介绍就介绍到这了。

回复

我来回复
  • 暂无回复内容