一直游离在pc端开发网站，当然也偶偶将网站制作成响应式的。
但是都没有研究过移动端的手势，上次在ctrip面试的一道题目如今还深深的刻在我的脑海中：
手机上的滑动事件该怎么处理，比如常见的app向右滑动出现菜单？
今天将hammer.js研究了一下，她主要是处理移动端的手势事件的，正如她的ad:Add touch gestures to your page.
我的思路：
1.当手指往右滑动时left块向右移动
2.当手指在红色的left向左滑动时left隐藏
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web design of responsive</title> <style> .container{ position: relative; width: 500px; margin: 0 auto; } #myElement { background: silver; width: 500px; height: 500px; text-align: center; font: 30px/300px Helvetica, 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> <script src="https://hammerjs.github.io/dist/hammer.js"></script> </head> <body> <div class="container"> <div id="myElement"></div> <div class="left" id="left">left</div> <div class="right" id="right">right</div> </div> <script> var myElement = document.getElementById(‘myElement‘); var left=document.getElementById(‘left‘), right=document.getElementById(‘right‘); var mc = new Hammer(myElement); var lt=new Hammer(left); var rt=new Hammer(right); mc.on("panleft",showright); mc.on("panright",showleft); function showleft(e){ left.style.display="block"; left.style.left="0"; e.preventDefault(); } function showright(e){ right.style.display="block"; right.style.right="0"; e.preventDefalut(); } //隐藏事件 lt.on("panleft",lefthide); function lefthide(e){ left.style.display="none"; e.preventDefalut(); } rt.on("panright",righthide); function righthide(e){ right.style.display="none"; e.preventDefalut(); } </script> </body> </html>
效果示例：http://2.liteng.sinaapp.com/javascript/hammer.html
主要的思想就是分两步走：
1.创建实例 var mc = new Hammer(myElement);
2.将示例绑定事件 mc.on("panleft/panright/tap/press",ftn);
学习官网：http://hammerjs.github.io/
原文地址：http://liteng.org/node/40
时间： 2024-10-13 08:08:24