手机端判断触摸滑动方向

本文为工具类方法分享，具体代码如下：

//手机端判断触摸滑动方向
var direction;
var move = {};
$('.load-medio').on('touchstart',function(e){//获取接触屏幕时的X和Ymove.startX = e.originalEvent.changedTouches[0].pageX;move.startY = e.originalEvent.changedTouches[0].pageY;
});
$('.load-medio').on('touchmove',function(e) {//获取滑动屏幕时的X,Ymove.endX = e.originalEvent.changedTouches[0].pageX;move.endY = e.originalEvent.changedTouches[0].pageY;
});
$('.load-medio').on('touchend',function(e) {//获取滑动屏幕时的X,Yvar distanceX = move.endX - move.startX;var distanceY = move.endY - move.startY;if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {direction='right';}else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {direction='left';}else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {direction='down';}else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {direction='up';$('.load-scr').click();}//console.log(direction);
});

手机端判断触摸滑动方向相关推荐

h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
H5中判断手势滑动方向
touchstart.touchend事件判断手势滑动方向 //data中进行定义 startX:null, startY:null,//mounted生命周期中进行监听 document.addEv ...
html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志支持手机端触屏滑动翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
Untiy3D笔记之番外篇——判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
php滑动拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
判断手指滑动方向 -- Android 学习之路
通过onTouchEvent 事件实现判断手指滑动方向今天在做2048的时候遇到的一个知识点,这里做一下总结用到的知识点 Android屏幕坐标系常用的触发事件判断滑动方向获取手指触屏时的坐 ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...
手机HTML拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果_气质_前端开发者...
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
手机控制电脑之手机端模拟鼠标滑动处理
最近做了一个手机通过wifi控制电脑的小demo,其中进行鼠标移动控制的时候,出现了一些小bug,这里记录一下正确的移动方法,第一个方法也是最容易想到的,就是自己通过记忆上一次鼠标位置,计算距离偏差, ...

手机端判断触摸滑动方向

手机端判断触摸滑动方向相关推荐

最新文章

热门文章