/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深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...
随机推荐
- MySQL总结小妙招
mysql5.7版本,免登陆修改管理员密码: vim /etc/my.cnf 加入skip-grant-tables,重启MySQL 终端输入 mysql ,直接登录MySQL数据库,然后use my ...
- JAVA代码保护从入门到放弃
java语言开发的产品,需要部署到客户现场服务器.产生了对代码进行保护的需求,开始研究代码加密方式. 经过研究分析后有两种思路,混淆和加密.两者各自适应不同的情况. 由于大量spring注解功能,并且 ...
- 21天实战caffe笔记_第二天
1 传统机器学习 传统机器学习:通过人工设计特征提取器,将原始数据转化为合适的中间表示形式或者特征向量,利用学习系统(通常为分类器)可以对输入模式进行检测或者分类.流程如下: 传统机器学习的局限在于需 ...
- Python【datetime】模块
import datetimeprint("==============date类================")#创建一个date对象:datetime.date(year, ...
- 「Vue」实用组件
一.时间格式 1.安装Moment模块 npm i moment -S2.main.js中设置全局过滤器 import moment from 'moment' Vue.filter('ctime', ...
- Hadoop生态圈-Hbase过滤器(Filter)
Hadoop生态圈-Hbase过滤器(Filter) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.
- RACCommand中的信号
示例: RACSignal* textSignal = [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscri ...
- VS2010 中更改项目名称
Time.vcxproj修改项目名称,主要是通过以下几个步骤就能完成: 修改解决方案的名称. 修改解决项目名称. 修改项目的程序集名称和默认命名空间 替换整个项目或解决方案中的出现该名称的地方. 修改 ...
- linq的语法和案例
本篇逐一介绍linq各个关键字的用法(from,select,group,into等),本篇所有的案例都是用linqpad来完成的(官方地址:http://www.linqpad.net/),建议想学 ...
- css实现0.5像素的边框
公司的设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的.iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候 ...