http://mmenu.frebsite.nl/

左右滑动效果

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.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。

附上苹果官方的事件文

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html

jquery.mmenu的更多相关文章

  1. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  2. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  3. jQuery.swatches – 把 Div 变成可爱的调色板

    jQuery.swatches 是一款开源的 jQuery 插件,能够把一个 Div 转换成漂亮的调色板.您可以自定义你想要的类,使用不同的类可以生成不同的调色板.这个功能能够帮助设计师方便的挑选设计 ...

  4. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  5. jQuery常用特效插件汇总

    jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/   1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...

  6. 应用于网站导航中的 12 个 jQuery 插件

    当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分.在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问.适当的导航工具能够帮助用户在网站的不同页面内容 ...

  7. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  8. 图片轮播(bootstrap)与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. CSS 部件

    1.导航菜单: [荐]抽屉式菜单 jQuery.mmenu jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单,效果很好.http://mmenu.frebsite.nl/ 2.jQuer ...

随机推荐

  1. 手机低端市场,联发科 vs 高通

    联发科(MTK) 是山寨机的源头,我过去曾经鄙视他,现在来了180度转弯. 其实联发科是台湾的上市公司,手机如此复杂的东西,当年 联发科能把基础的手机做出来,而后小山寨厂改改外形,配件就能出若干款手机 ...

  2. HDOJ 1326 Box of Bricks(简单题)

    Problem Description Little Bob likes playing with his box of bricks. He puts the bricks one upon ano ...

  3. android仿京东、淘宝商品详情页上拉查看详情

    话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...

  4. 将汉字转为UTF-8编码

    01./** 02. * 将文件名中的汉字转为UTF8编码的串,以便下载时能正确显示另存的文件名. 03. * @param s 原文件名 04. * @return 重新编码后的文件名 05. */ ...

  5. 大型分布式C++框架《二:大包处理过程》

    本来这一篇是打算写包头在分布式平台中的具体变换过程的.其实文章已经写好了.但是想了这个应该是不能随便发表的.毕竟如果知道了一个包的具体每个字节的意义.能伪造包来攻击系统.其次来介绍一个包的具体变换过程 ...

  6. Github开源Java项目(Disconf)上传到Maven Central Repository方法详细介绍

    最近我做了一个开源项目 Disconf:Distributed Configuration Management Platform(分布式配置管理平台) ,简单来说,就是为所有业务平台系统管理配置文件 ...

  7. Servlet的生命周期?

    Servlet何时被创建: 1,默认情况下,当WEB客户第一次请求访问某个Servlet的时候,WEB容器将创建这个Servlet的实例. 2,当web.xml文件中如果<servlet> ...

  8. java socket报文通信(一) socket的建立

    TCP是Transfer Control Protocol的 简称,是一种面向连接的保证可靠传输的协议.通过TCP协议传输,得到的是一个顺序的无差错的数据流.发送方和接收方的成对的两个socket之间 ...

  9. 使用ViewPager+Fragment来实现带滚动条的多屏滑动-IndicatorFragmentActivity

    转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/17201587 介绍 在android应用中,多屏滑动是一种很常见的风格,博主 ...

  10. Mongodb 条件查询

    1.1 查询出所有数据的指定键(name ,age ,country) db.persons.find({},{name:1,age:1,country:1,_id:0}) 2.查询条件 2.查询条件 ...