/touch滑屏事件
//touch滑屏事件
var windowHeight = $(window).height(),
$body = $("body");
$body.css("height", windowHeight);
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 10 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 10 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 10) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 10 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
/touch滑屏事件的更多相关文章
- 移动端touch滑屏事件
<script> var windowHeight = $(window).height(), $body = $("body");// console.log($(w ...
- JS移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- javascript移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- mobile_竖向滑屏
竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端,"手指按下","手指移动" 两个事件即可(且不需要嵌套),有需要时才使用 "手指离 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 【原】移动web滑屏框架分享
本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...
随机推荐
- Miiler-Robin素数测试与Pollard-Rho大数分解法
板题 Miiler-Robin素数测试 目前已知分解质因数以及检测质数确定性方法就只能\(sqrt{n}\)试除 但是我们可以基于大量测试的随机算法而有大把握说明一个数是质数 Miler-Robin素 ...
- 洛谷 P1199 三国游戏 解题报告
P1199 三国游戏 题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有\(N\)位武将(\(N\)为 ...
- Android Studio之BuildConfig类
https://blog.csdn.net/lvxiangan/article/details/71601451 Android Studio开发中,把一个module输出打包为jar文件,我们会发现 ...
- MVP, MVVM In Android
MVP, MVVM In Android(新手必看)安卓MVP的理解,看完你就会用mvp了 - zq019的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/zq019 ...
- 东北育才 NOIP模拟赛第1场
终于400了.这套题很鬼畜.两道贪心. GRACE sort过后,不能直接统计,本人毫无多想,相同的直接放在一起.结果太多人AC. SUM sigma+异或和(可使用前缀和处理),本人毫无考虑乱MOD ...
- 各种RF的比较
转的. 随机森林:是一个包含多个决策树的分类器, 并且其输出的类别是由个别树输出的类别的众数而定.,随机森林对回归的结果在内部是取得平均 但是并不是所有的回归都是取的平均,有些是取的和,以后会发博文来 ...
- python基础1--列表
列表 列表是最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 1.定义列表 fruits = ['apple','banana','orange'] 2.通过下标访问列表中的元素, ...
- Python【yagmail】模块发邮件
#步骤一:import yagmail #步骤二:实例化一个发邮件的对象username = '553637138@qq.com' #邮箱账号pwd='sa2008' #授权码mail = yagma ...
- OpenStack介绍(一)
官方网站:http://www.openstack.org/ 介绍 OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开 ...
- Hadoop基础-Hadoop快照管理
Hadoop基础-Hadoop快照管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.快照的作用 快照可以迅速对文件(夹)进行备份,不产生新文件,使用差值存储,默认是禁用状态. ...