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

一直游离在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

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

你可能感兴趣的:(移动端)