jquery判断手指滑动方向
jquery判断手指滑动方向
<pre>
/*判断哪个滑动方向还是自己改下 要么上下 要么左右*/
var startX;
var startY;
$(".shanghua").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
console.log('startX:' + startX);
console.log('startY:' + startY);
});
$(".shanghua").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
var moveEndX = e.originalEvent.changedTouches[0].pageX;
var moveEndY = e.originalEvent.changedTouches[0].pageY;
console.log('moveEndX:' + moveEndX);
console.log('moveEndY:' + moveEndY);
var X = moveEndX - startX;
var Y = moveEndY - startY;
//下滑
if (Y > 0) {
alert('下滑');
}
//上滑
else if (Y < 0) {
alert('上滑');
}
});
</pre>
jquery判断手指滑动方向的更多相关文章
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- web移动前端页面,jquery判断页面滑动方向
/*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...
- js判断手指滑动方向(移动端)
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...
- jquery 判断手势滑动方向(上下左右)
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...
- js判断元素滑动方向(上下左右)移动端
每天学习一点点. 1 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) ...
- 判断listview滑动方向的代码片段
mListView.setOnScrollListener(new OnScrollListener() { private int lastIndex = 0; @Override public v ...
随机推荐
- 10月27日Java整理
实验一:凯撒密码 import java.util.Scanner; //zhanxinwu,October,25,2016 public class Addmi { public static vo ...
- e课表项目第二次冲刺周期第八天
昨天完成了什么? 昨天,我们组商量讨论了二层界面的设计,添加课程所需要的信息大概有:课程名称.教室.任课教师.上课时间.类型(单周.双周.单双周)以及备注等等.然后,我们通过界面的UI设计,让我们软件 ...
- MySQL复制从库建立-mysqldump方式
环境准备: master:192.168.0.106:3306slave:192.168.0.105:3306 主和从都必须配置有唯一的ID(server_id:建议ip最后一组+MySQL端口号,例 ...
- 记录JS如何使用广度遍历找到节点的所有父节点
我们在实际的工作业务场景中经常遇到这样的场景,求取树数据中某个节点的父亲节点以及所有的父亲节点,这样的场景下不建议使用深度遍历,使用广度遍历可以更快找到. 1.案例解说 比如树的长相是这样的: 树的数 ...
- Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
- python selenium之CSS定位
ccs的优点:css相对xpath语法比xpath简洁,定位速度比xpath快 css的缺点:css不支持用逻辑运算符来定位,而xpath支持.css定位语法形式多样,相对xpath比较难记. css ...
- 在web端使用html5访问远程桌面
背景: 2019年12月5日,微软宣布放弃浏览器Edge,转而推出一款新的浏览器,而这款新浏览器将会采用谷歌的Chromium 内核... 好了,反正已经无力吐槽,微软烂尾的项目也不是一个两个了,之前 ...
- 代码审计-dedecms任意文件名修改拿shell
0x01 漏洞分析 漏洞文件: dede/file_manage_control.php ,$fmdo 开始时赋值,所以我们可以使fmdo=rename ,使其进入 if语句 ,调用 FileMana ...
- PHP7源码之array_unique函数分析
以下源码基于 PHP 7.3.8 array array_unique ( array $array [, int $sort_flags = SORT_STRING ] ) (PHP 4 >= ...
- 给iOS中高级求职者的一份面试题解答
前段时间更新了一篇 给iOS中高级面试官的一份招聘要求 收到很多小伙伴的点赞与关注.可能有很多小伙伴已经带着我在那篇文章给大家提供的一些面试技巧 & 其中的面试题 已经开始招聘或者应聘了!这里 ...