移动端js判断手指滑动方向
2017-09-18 17:03
399 查看
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判断手指滑动方向(移动端)
- PC和移动端判断鼠标(手指)滑动方向(touch方向)
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
- 移动端网页判断手指触摸滑动的方向
- 判断移动端手指的滑动方向
- 封装判断touch手指滑动方向的函数
- 判断手指滑动方向 -- Android 学习之路
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 移动应用滑动屏幕方向判断解决方案,JS判断手势方向
- 《移动端浏览器Touch事件判断手指滑动方向方法》
- 移动端js手指滑动事件初体验
- Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
- 移动应用滑动屏幕方向判断解决方案JS判断手势方向
- 1、js原生实现移动端手指滑动轮播图效果
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
- 基于js的无缝轮播图( 移动端手指滑动操作)(扩展:简单的倒计时)
- 網頁設計% JS 移动端原生JS实现手指跟随触控滑动
- H5移动端判断手势滑动方向
- Untiy3D笔记之番外篇——判断手指滑动方向