您的位置：首页 > 移动开发

不能遗忘移动端的手势事件

2014-12-05 15:15 197 查看

一直游离在pc端开发网站，当然也偶偶将网站制作成响应式的。

但是都没有研究过移动端的手势，上次在ctrip面试的一道题目如今还深深的刻在我的脑海中：

手机上的滑动事件该怎么处理，比如常见的app向右滑动出现菜单？

今天将hammer.js研究了一下，她主要是处理移动端的手势事件的，正如她的ad:Addtouchgesturestoyourpage.

我的思路：

1.当手指往右滑动时left块向右移动

2.当手指在红色的left向左滑动时left隐藏

代码如下：

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>webdesignofresponsive</title> <style> .container{ position:relative; width:500px; margin:0auto; } #myElement{ background:silver; width:500px; height:500px; text-align:center; font:30px/300pxHelvetica,Arial,sans-serif; overflow:hidden; } .left,.right{ display:none; width:300px; height:500px; background-color:#f00; } .left{ position:absolute; top:0; left:-300px; } .right{ position:absolute; top:0; right:-300px; } </style> <scriptsrc="https://hammerjs.github.io/dist/hammer.js"></script> </head> <body> <divclass="container"> <divid="myElement"></div> <divclass="left"id="left">left</div> <divclass="right"id="right">right</div> </div> <script> varmyElement=document.getElementById('myElement'); varleft=document.getElementById('left'), right=document.getElementById('right'); varmc=newHammer(myElement); varlt=newHammer(left); varrt=newHammer(right); mc.on("panleft",showright); mc.on("panright",showleft); functionshowleft(e){ left.style.display="block"; left.style.left="0"; e.preventDefault(); } functionshowright(e){ right.style.display="block"; right.style.right="0"; e.preventDefalut(); } //隐藏事件 lt.on("panleft",lefthide); functionlefthide(e){ left.style.display="none"; e.preventDefalut(); } rt.on("panright",righthide); functionrighthide(e){ right.style.display="none"; e.preventDefalut(); } </script> </body> </html>

效果示例：http://2.liteng.sinaapp.com/javascript/hammer.html

主要的思想就是分两步走：

1.创建实例varmc=newHammer(myElement);

2.将示例绑定事件mc.on("panleft/panright/tap/press",ftn);

学习官网：http://hammerjs.github.io/

原文地址：http://liteng.org/node/40

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐