如今智能移动设备已经渗透到人们生活的方方面面，用户数量也在不断迅速增长（市场研究机构 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. work_7

    1. 理解C++变量的作用域和生命周期 a) 用少于10行代码演示你对局部变量的生命周期的理解 局部变量分为动态局部变量和静态局部变量,其共同点为作用域均为定义它的函数体或语句块,其不同点为其生命周期 ...

  2. HDU 5805 NanoApe Loves Sequence （模拟）

    NanoApe Loves Sequence 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5805 Description NanoApe, the ...

  3. svn备份与恢复

    公司把SVN服务器从windows迁移到linux,其主要步骤记录如下. windows上备份 "C:\Program Files\VisualSVN Server\bin\svnadmin ...

  4. Linux下的进程管理

    在操作系统系统中,进程是一个非常重要的概念. 一.Linux中进程的相关知识 1.什么是进程呢? 通俗的来说进程是运行起来的程序.唯一标示进程的是进程描述符(PID),在linux内核中是通过task ...

  5. 【转】C#传委托给C的函数指针调用问题

    C#传委托给C的函数指针调用问题C代码如下: #include "stdio.h" __declspec(dllexport) int Call(int (*qq)(int num ...

  6. UVa 1629 Cake slicing (记忆化搜索)

    题意:一个矩形蛋糕上有好多个樱桃,现在要做的就是切割最少的距离,切出矩形形状的小蛋糕,让每个蛋糕上都有一个樱桃,问最少切割距离是多少. 析:很容易知道是记忆化搜索,我们用dp[u][d][l][r]来 ...

  7. GMT 绘制台站分布图

    set ps=test.psset J=M4i set R=73/135.5/10/54rem gmt gmtset  FONT_ANNOT_PRIMARY 8p FONT_TITLE 8p  gmt ...

  8. 怀念我的老师——丁伟岳院士 by 史宇光

       在我的人生中,丁老师对我的帮助是莫大的. 我第一次见到丁老师是在91年8月份的一次南开非线性分析学术会议上(会议期间苏联发生了8.19事件),他当时报告的题目是关于二维调和映射热流短时间爆破的问 ...

  9. PHP之路,Day1 - PHP基础

    本节内容  1.PHP介绍  2.第一个PHP脚本程序  3.PHP语言标记  4.指令分割符  5.程序注释  6.在程序中使用空白符的处理  7.变量  8.变量的类型  9.数据类型之间相互转换 ...

  10. 通过lldb远程调试iOS App

    苹果从Xcode5开始弃用了gcc及gdb, 只能使用llvm用lldb. 在越狱机上虽然仍然可以使用gdb进行调试,但lldb是趋势.下面就介绍一种通过Wifi或者USB,在Mac上使用lldb对i ...