標籤：des style blog http io ar color os sp
一直游離在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
不能遺忘移動端的手勢事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
