jquery.mmenu
左右滑动效果
http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html
js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件
touchend在触摸结束时触发事件
touchmove这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。
这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。
下面是一段代码实例:
document.getElementsByTagName_r('body')[0].addEventListener('touchstart', function (e) {
nStartY = e.targetTouches[0].pageY;
nStartX = e.targetTouches[0].pageX;
});
document.getElementsByTagName_r('body')[0].addEventListener('touchend', function (e) {
nChangY = e.changedTouches[0].pageY;
nChangX = e.changedTouches[0].pageX;
PS:1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好,已经把这个问题完美的避免掉了。
2.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。
附上苹果官方的事件文
jquery.mmenu的更多相关文章
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- jQuery.swatches – 把 Div 变成可爱的调色板
jQuery.swatches 是一款开源的 jQuery 插件,能够把一个 Div 转换成漂亮的调色板.您可以自定义你想要的类,使用不同的类可以生成不同的调色板.这个功能能够帮助设计师方便的挑选设计 ...
- 移动开发必备!15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
- jQuery常用特效插件汇总
jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/ 1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...
- 应用于网站导航中的 12 个 jQuery 插件
当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分.在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问.适当的导航工具能够帮助用户在网站的不同页面内容 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 图片轮播(bootstrap)与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS 部件
1.导航菜单: [荐]抽屉式菜单 jQuery.mmenu jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单,效果很好.http://mmenu.frebsite.nl/ 2.jQuer ...
随机推荐
- java中jsoup框架解析html
今天遇到对网页内容进行操作,思考了一下,先获取连接后的html内容,然后对html文档进行操作呗.思路没有问题,但是问题还是不少.于是便找到了jsoup这个神器了... 1.什么是jsoup? 百度百 ...
- 【转】【Android UI设计与开发】之详解ActionBar的使用,androidactionbar
原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...
- c语言学习笔记(1)——c语言的特点
一.c语言概述 1.为什么学习c语言? (1)c的起源和发展 第一代语言:机器语言 1101 第二代语言:汇编语言 add ax,bx; 第三代语言:高级语言 a+b; 结构化:c fortra ...
- CURD
CURD是一个数据库技术中的缩写词,一般的项目开发的各种参数的基本功能都是CURD. 它代表创建(Create).更新(Update).读取(Read)和删除(Delete)操作. CURD 定义了用 ...
- tcp/ip连接
1.TCP先连接(三次握手) client -> server : SYN a server -> client :SYN b, ack a+1 client -> server a ...
- (转)Maven实战(一)安装与配置
1. 简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 如果你已经有十次输入同样的Ant targets来编译你的代码.jar或者w ...
- 你需要知道的九大排序算法【Python实现】之基数排序
八.基数排序 基本思想:基数排序(radix sort)属于"分配式排序"(distribution sort),又称"桶子法"(bucket sort)或bi ...
- [Angular 2] *ngFor with index
Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = in ...
- view动画库
Android View Animations这个项目收集了各种有趣的动画效果. 所有效果: Attension Flash, Pulse, RubberBand, Shake, Swing, Wob ...
- Android-操作栏之图标导航
想实现图标向上导航功能,步子分两步走: 1.样式上要改变-->图标要变成可点击的按钮,并有一个向左的箭头. 2.功能上要实现-->实现向上导航 首先谈第一步: 对于拥有fragment的a ...