不能遺忘移動端的手勢事件

一直遊離在pc端開發網站，固然也偶偶將網站製做成響應式的。javascript

可是都沒有研究過移動端的手勢，上次在ctrip面試的一道題目現在還深深的刻在個人腦海中：html

手機上的滑動事件該怎麼處理，好比常見的app向右滑動出現菜單？java

今天將hammer.js研究了一下，她主要是處理移動端的手勢事件的，正如她的ad:Add touch gestures to your page.node

個人思路：git

1.當手指往右滑動時left塊向右移動github

2.當手指在紅色的left向左滑動時left隱藏web

代碼以下：面試

<!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.htmlapp

主要的思想就是分兩步走：ide

1.建立實例 var mc = new Hammer(myElement);

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

學習官網：http://hammerjs.github.io/

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