移动端之touch事件--手指的滑动事件
转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html
总结:touchmove的最后坐标减去touchstart的起始坐标。
X的结果如果正数,则说明手指是从左往右划动;
X的结果如果负数,则说明手指是从右往左划动;
Y的结果如果正数,则说明手指是从上往下划动;
Y的结果如果负数,则说明手指是从下往上划动。
转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html
代码如下:
$("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 > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
以上代码,在测试时仍不能达到预期的效果,此时要注意到一个事实--$('body').height = 0(此处是个大坑,但有时也不会出现,望大神指教)
故还应该在此基础上添加一下代码:
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height());
// console.log($('body').height());
$body.css("height", windowHeight);
到此,已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。
转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html
移动端之touch事件--手指的滑动事件的更多相关文章
- 浅谈移动端之touch事件--手指的滑动事件
今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...
- touch移动触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- js实现touch移动触屏滑动事件
在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...
- wap开发之滑动事件(swipe、tap、swipeleft、swiperight)等
最近一直找在wap端可以实现的swipe等滑动事件的方法,开始研究了jquery-mobile,zepto,结果由于jqm太大.zepto有不少缺陷.为此研究了zepto,想把里面的swipe事件独立 ...
- AndroidのListView之滑动列表项(点击事件和滑动事件共存)
这里正好在项目有这么一个bt的需求,如下图ListView的item可以响应点击事件也可以响应item的左右滑动事件,两个事件可以相互独立互不影响. 听说iphone的list选项就有这样bt的功能, ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
随机推荐
- Visual studio C++ MFC之列表控件CListCtrl Control
背景 本篇旨在MSDN帮助文档下总结列表控件CListCtrl Control的使用,并列出碰到的具体问题. 正文 列表型控件List Control的类是ClistCtrl,具体成员对象详见链接,以 ...
- pat(B) 1037. 在霍格沃茨找零钱(水题)
代码: #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> ...
- lucene 索引中文档的属性建立与不建立带来的影响总结
索引中文档的属性建立与不建立带来的影响总结 1.依据文档的某属性去查找索引的话,只会返回带有此属性(如果你对当前属性设定了条件,那么需要满足当前条件)的所有文档,没有建立此属性的文档是不会在返回结 ...
- Log4j介绍,log4j.properties配置详解
http://www.cnblogs.com/simle/archive/2011/09/29/2195341.html本文主要解释log4j的配置文件各个配置项的含义,内容是从网上转载的 1.Log ...
- spring boot和thrift、zookeeper建立微服务
原文地址:http://www.cnblogs.com/skyblog/p/5535418.html Spring cloud适应于云端服务,也适用于企业信息化SOA建设.spring boot也是r ...
- Spring Cloud简单入门教程
原文地址:http://www.cnblogs.com/skyblog/p/5127690.html 按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器 ...
- ubuntu14.04 flash driver 安装
直接将14.04镜像直接放到flash driver 中 然后在bios设置flash driver 优先启动 然后格出一块盘给ubuntu 安装使用 按操作要求一路点下去就可以,记得选windows ...
- 信号处理的好书Digital Signal Processing - A Practical Guide for Engineers and Scientists
诚心给大家推荐一本讲信号处理的好书<Digital Signal Processing - A Practical Guide for Engineers and Scientists>[ ...
- bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘
1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 Time Limit: 3 Sec Memory Limit: 64 MB Submit: 387 Sol ...
- 【转载】checkbox复选框的一些深入研究与理解
转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌. ...