zoukankan      html  css  js  c++  java
  • 不能遗忘移动端的手势事件

    一直游离在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;
        	 500px;
        	margin: 0 auto;
        }
        #myElement {
        background: silver;
         500px;
        height: 500px;
        text-align: center;
        font: 30px/300px Helvetica, Arial, sans-serif;
        overflow: hidden;
      }
        .left,.right{
        	display: none;
        	 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

  • 相关阅读:
    PointToPointNetDevice doesn't support TapBridgeHelper
    NS3系列—10———NS3 NodeContainer
    NS3系列—9———NS3 IP首部校验和
    NS3系列—8———NS3编译运行
    【习题 7-6 UVA
    【Good Bye 2017 C】 New Year and Curling
    【Good Bye 2017 B】 New Year and Buggy Bot
    【Good Bye 2017 A】New Year and Counting Cards
    【Educational Codeforces Round 35 D】Inversion Counting
    【Educational Codeforces Round 35 C】Two Cakes
  • 原文地址:https://www.cnblogs.com/leeten/p/4146730.html
Copyright © 2011-2022 走看看