如今智能移动设备已经渗透到人们生活的方方面面，用户数量也在不断迅速增长（市场研究机构 eMarketer 在今年初发表的趋势报告中预测，2014年至2018年，中国智能手机用户从总人口的 38.3%增加到 51.1%；2014年中国智能手机用户已超过5亿，2018年将超过7亿）

1. 触屏手势

随着大屏幕时代的到来，物理键盘逐渐退化，只剩下今天可见的 home 或 return 等少数按键。大部分的手机操控都依赖触屏完成。

现在触屏操作主要依靠电容式触摸屏传感器，可以实现多点触控。触屏手势参考如下：Touch Gesture Reference Guide,TouchGestureGuide，TouchGestureCards

下面我们来总结一下，经常用到的触屏手势有哪些：

 
  • 一只手指

    • 轻扫（swipe）
    • 轻击（tap）
    • 点击（click）
    • 双击（double click）
    • 拖动（pan）
    • 长按（long press）
  • 两只手指
    • 缩放、捏合（pinch）

      • eg.缩放网页、图片
    • 旋转（rotation）
    • 滚动（scroll，类似 mousewheel，不推荐）
  • 三只或更多只指
    • swipe
    • 抓（claw pinch）
      • eg. 回到主界面

看了这么多触屏手势，我们再来看看有哪些js的触屏事件

触屏原生js事件示例：

我是个懒人，网上有好的示例，就不重复写了。而且这篇文章确实写的不错。（话说有懒人才有了创新）
 

2. 重力感应：方向&重力（Orientation & Motion）

依赖 磁阻传感器、加速度传感器、角加速度传感器（陀螺仪）、重力传感器、方向传感器（电子罗盘）等

  • 指南针（compass）
  • 地图导航（map、navigation）
  • 现实增强（Augmented reality，AR）
  • 摇一摇（shaking gesture）
  • 游戏控制（game control）
  • 计步器
我对mobile重力感应这部分挺有兴趣的，就搜了很多有关js重力的文章。 
 
 
自己也学着写了个小示例：白色小球根据重力滚动（放到移动设置上看）
 <!doctype html>

 <html>

 <head>

     <meta charset="gbk"/>

     <meta name="viewport"

           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

     <meta name="apple-mobile-web-app-capable" content="yes">

     <meta name="apple-touch-fullscreen" content="yes">

     <style>

         .test{

             border:2px solid green;

             width:300px;

             height:350px;

             background: #000;

             position: relative;

             COLOR:#FFF;

         }

         .test #ball{

             width:12px;

             height:12px;

             background: #fff;

             -webkit-border-radius:6px;

             position: absolute;

             left:0;

             right: 0;

         }

     </style>

 </head>

 <body>

 <h2>设备方向感应测试</h2>

 <div id="msg"></div>

 <div id='test' tabindex='0' class="test">

     <!--<img src="img/3.png" id="ball">-->

     <div id="ball"></div>

 </div>

 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo" alt="">

 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo2" alt="">

 <script>

     function Orientation(selector){}

     Orientation.prototype.init = function(){

         window.addEventListener('deviceorientation', this.oriListener, false);

         window.addEventListener('MozOrientation', this.oriListener, false); //为firefox所用

         window.addEventListener('devicemotion', this.oriListener, false);   //重力感应

     }

     Orientation.prototype.oriListener = function(e) {

         setTimeout(function(){

             handler(e);

             deviceMotionHandler(e)

         },10);

         function handler(e){

             // For FF3.6+

             if (!e.gamma && !e.beta) {

                 // angle=radian*180.0/PI 在firefox中x和y是弧度值,

                 e.gamma = (e.x * (180 / Math.PI)); //转换成角度值,

                 e.beta = (e.y * (180 / Math.PI)); //转换成角度值

                 e.alpha = (e.z * (180 / Math.PI)); //转换成角度值

             }

             /* beta:  -180..180 (rotation around x axis) */

             /* gamma:  -90..90  (rotation around y axis) */

             /* alpha:    0..360 (rotation around z axis) (-180..180) */

             var gamma = e.gamma

             var beta = e.beta

             var alpha = e.alpha

             if(e.accelerationIncludingGravity){

                 // window.removeEventListener('deviceorientation', this.orientationListener, false);

                 gamma = e.accelerationIncludingGravity.x*300

                 beta = -e.accelerationIncludingGravity.y*300

                 alpha = event.accelerationIncludingGravity.z*300

             }

             if (this._lastGamma != gamma || this._lastBeta != beta) {

                 document.querySelector("#msg").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0)

                 var style = document.querySelector("#ball").style;

                 style.left = gamma/90 * 200 + 150 +"px";

                 style.top = beta/90 * 200 + 100 +"px";

                 this._lastGamma = gamma;

                 this._lastBeta = beta;

             }

         }

         function deviceMotionHandler(e) {

             /*

             if(e.accelerationIncludingGravity){

                 var gx = e.accelerationIncludingGravity.x;

                 var gy = e.accelerationIncludingGravity.y;

                 var gz = e.accelerationIncludingGravity.z;

             }

              var facingUp = -1;

              if (gz > 0) {

              facingUp = +1;

              }

              var tiltLR = Math.round(((gx) / 9.81) * -90);

              var tiltFB = Math.round(((gy + 9.81) / 9.81) * 90 * facingUp);

              //document.getElementById("moCalcTiltLR").innerHTML = tiltLR;

              // document.getElementById("moCalcTiltFB").innerHTML = tiltFB;

              var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)";

              document.getElementById("imgLogo").style.webkitTransform = rotation;

            */

             var gamma = e.gamma

             var beta = e.beta

             var alpha = e.alpha

             var tiltLR =gamma; //Math.round(((beta) / 9) * -90);

             var tiltFB = beta;

             var rotation = "rotate(" + tiltLR + "deg)";

             var rotation2 = "rotate(" + tiltFB + "deg)";

             var style = document.querySelector("#imgLogo").style;

             var style2 = document.querySelector("#imgLogo2").style;

             style.webkitTransform = rotation;

             style2.webkitTransform = rotation2;

         }

     };

     (new Orientation()).init();

 </script>

 </body>

 </html>
 

移动终端学习2：触屏原生js事件及重力感应的更多相关文章

  1. 手机触屏的js事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件:     1.touchstart:  // 手指放到屏幕上的时候触发      2.touchmove:  // ...

  2. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  3. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  4. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  5. 触屏Tap模拟事件

    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...

  6. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  7. jquery -- 触屏设备touch事件

    几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...

  8. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

  9. 学习记录----简单的原生js路由

    在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...

随机推荐

  1. Sql建表语句

    create table dbo.[Finance_CityInfo] ([CityId] int identity(1,1) not null , [City] nvarchar(20) not n ...

  2. redis的hashes类型

    redis hash 是一个string类型的field和value 的映射表.它的添加.删除操作都是O(1) . hash特别适合用于存储对象.相较于将对象的每个字段存成单个string类型 . 将 ...

  3. C++11 能好怎？

    0. 摘要 近期读了一些关于C++11标准的材料. 本篇博客将从新标准的优点.与旧版本的区别和使用方法三个角度,大致介绍我对C++11的认识. C++11标准,原名C++0x, 是03版旧标准的更新. ...

  4. codeforces 653A Bear and Three Balls

    A. Bear and Three Balls time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  5. 【Android】Handler的应用（三）：从服务器端分页加载更新ListView

    在前面两节中,我们了解了如何从服务器中加载JSON数据. 现在,我们将把服务器中的JSON数据加载更新到ListView. 并且,结合之前博文的  “动态追加分页ListView数据”的相关知识,实现 ...

  6. 一、Microsoft Dynamics CRM 4.0 SDK概述

    Chapter 1. Microsoft Dynamics CRM 4.0 SDK Overview(SDK概述) You are probably reading this book because ...

  7. Windows Server2008 R2 MVC 环境配置

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. Java学习笔记（六）：面向对象、接口和抽象类

    类和对象 Java是一门面向对象的语言,下面我们来了解一下Java中的面向对象. 方法和重载 Java中的方法格式如下: 访问修饰符 返回值类型 方法名(参数){ 方法主体 } Java的方法支持重载 ...

  9. 剑指OFFER之跳台阶（九度OJ1388）

    题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1<=n< ...

  10. I/O流的学习

    一.I/O流 1.判定是输入还是输出我们应该站在程序的立场: 2.判断传输的是字节还是字符,从而决定管道的大小,字节传递是根本,可以传递所有的数据类型,字符传递专门用来传递文本数据,字节主要用来传递二 ...