听说code能改变world，所以就学了

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

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

posted @ 2014-12-05 15:15  李腾  阅读(749)  评论(0)  编辑  收藏  举报

如果我加了黑链呢：http://liteng.org