/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深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...
随机推荐
- digitalworld.local: MERCY靶机入侵
0x01 前言 MERCY是一个致力于PWK课程安全的靶机系统.MERCY是一款游戏名称,与易受攻击的靶机名称无关.本次实验是攻击目标靶机获取root权限并读系统目录中的proof.txt信息 靶机的 ...
- 构建工具-----Gradle(二)-----myeclipse 10和myeclipse2015安装gradle插件----其他版本的myeclipse类似
我们需要给myeclipse安装gradle的插件.这样myeclipse就能识别到gradle项目了,直接加载进去即可. 我们先安装配置系统命令行的gradle,挺简单的,下载后配置环境变量即可,详 ...
- 解决SurfaceView调用setZOrderOnTop(true)遮挡其他控件
解决SurfaceView调用setZOrderOnTop(true)遮挡其他控件的问题 http://marller.blog.51cto.com/8699646/1762028 FAQ: Surf ...
- Andoid自动判断输入是电话,网址或者Email的方法--Linkify
Andoid自动判断输入是电话,网址或者Email的方法----Linkify的应用!http://blog.csdn.net/android_tutor/article/details/500016 ...
- NOIWC前的交流题目汇总
RT 2018.12.27 i207M:BZOJ 4695 最假女选手 以维护最大值为例,记录最大值和严格次大值和最大值的出现次数,然后取min的时候递归到小于最大值但大于次大值修改,这个就是最重要的 ...
- 解题:SCOI 2008 配对
题面 如果没有两个数不能相同这个限制就两个数组排序后贪心即可.现在加上这个限制,注意到每个数组中的数是两两不同的,所以每次一定能在前面或后面一个数中找一个换过来,这样每次考虑相邻三个数转移就可以了,注 ...
- E - Down or Right Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)
http://codeforces.com/contest/1023/problem/E 交互题 #include <cstdio> #include <cstdlib> #i ...
- RF - selenium - 常用关键字
1. 打开浏览器 Open Browser htpp://www.testclass.net chrome 2. 关闭浏览器 Close Browsers Close All Browse ...
- Framingham风险评估
Framingham风险评分: Framingham 心脏研究和其他流行病学队列研究改变了20世纪后半部分对疾病的关注点,即从治疗已经存在的心血管疾病到预防处于疾病危险的状态.该策略的关键因素是识别那 ...
- 安装MySQL5.7由于 Redistributable导致失败
今天上午安装MySQL5.7时一直提示 1: Action 10:59:21: INSTALL. 1: 1: MySQL Server 5.7 2: {F08E9C75-A42E-4962-8760- ...