移动端js判断手指滑动方向

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判断手指滑动方向相关推荐

Untiy3D笔记之番外篇——判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
判断手指滑动方向 -- Android 学习之路
通过onTouchEvent 事件实现判断手指滑动方向今天在做2048的时候遇到的一个知识点,这里做一下总结用到的知识点 Android屏幕坐标系常用的触发事件判断滑动方向获取手指触屏时的坐 ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...
androidstudio判断手指滑动方向_方向盘的黑科技有多“黑”
Mercedes-Benz 从第一辆汽车发明到现在的一个多世纪里,有数不清的汽车品牌诞生,也有不少品牌衰败.而他们中间,真正敢说"我为汽车技术的革命与进步做出了贡献"的品牌却寥寥无 ...
js判断手指滑动（移动端）
var startx, starty;//获得角度function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.P ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
H5中判断手势滑动方向
touchstart.touchend事件判断手势滑动方向 //data中进行定义 startX:null, startY:null,//mounted生命周期中进行监听 document.addEv ...
移动端js判断是app还是微信还是浏览器
移动端js判断是app还是微信还是浏览器 const ua = navigator.userAgent.toLowerCase();const isWeixin = ua.indexOf('micro ...

移动端js判断手指滑动方向

移动端js判断手指滑动方向相关推荐

最新文章

热门文章