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 ...
随机推荐
- redis安装及简单使用
前言 一般企业级开发,数据库用的都是关系型数据库Mysql.Oracle及SqlServer.无一例外,在开发过程中,我们都必须通过数据库驱动来连接到数据库,之后才可以完成对数据库的增删改查等业务.而 ...
- Unreal Engine 4 系列教程 Part 3:材质教程
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 【Python秘籍】十进制整数与二进制数的转换
最近在用Python写遗传算法时,发现需要将十进制的整数转换成二进制数,那么怎么来转换呢?当然如果你学过进制转换的有关计算方法,你可以手动编写一些函数来实现,不过总体来说还是比较麻烦的,这里介绍Pyt ...
- springboot使用idea打jar包
1.如果有本地jar包依赖,放到/WEB-INF/lib下,用system类型配到pom中 <dependency> <groupId>org.wechat</group ...
- HDU 1532 Drainage Ditches(最大流 EK算法)
题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1532 思路: 网络流最大流的入门题,直接套模板即可~ 注意坑点是:有重边!!读数据的时候要用“+=”替 ...
- HDU 3371 Connect the Cities(并查集+Kruskal)
题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=3371 思路: 这道题很明显是一道最小生成树的题目,有点意思的是,它事先已经让几个点联通了.正是因为它先 ...
- php的cookie怎么使用
PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆 什么是cookie? 服务器在客户端保存用户的信息,比如登录名,密码等. 这些 ...
- CVE 2019-0708漏洞复现防御修复
CVE-2019-0708 Windows再次被曝出一个破坏力巨大的高危远程漏洞CVE-2019-0708.攻击者一旦成功利用该漏洞,便可以在目标系统上执行任意代码,包括获取敏感信息.执行远程代码.发 ...
- pytest2-收集与执行测试用例规则
pytest收集测试用例规则 测试文件以test_开头(以_test结尾也可以) 测试类以Test开头,并且不能带有 init 方法 测试函数以test_开头(以_test结尾也可以) pytest执 ...
- Vue躬行记(4)——组件
组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用 ...