移動終端學習2：觸屏原生js事件及重力感應

本文轉載自查看原文 2013-12-09 16:49 5094 htm5/ html5/ css3/ 移動端/ 重力感應/ 移動設備方向感應/ css3

如今智能移動設備已經滲透到人們生活的方方面面，用戶數量也在不斷迅速增長（市場研究機構 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事件示例：

http://hi.baidu.com/dandan_ze/item/50e45f96100ad04cf1421507

我是個懶人，網上有好的示例，就不重復寫了。而且這篇文章確實寫的不錯。（話說有懶人才有了創新）

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

依賴磁阻傳感器、加速度傳感器、角加速度傳感器（陀螺儀）、重力傳感器、方向傳感器（電子羅盤）等

指南針（compass）
地圖導航（map、navigation）
現實增強（Augmented reality，AR）
搖一搖（shaking gesture）
游戲控制（game control）
計步器

我對mobile重力感應這部分挺有興趣的，就搜了很多有關js重力的文章。

http://blog.csdn.net/hfahe/article/details/7516317

http://www.pjhome.net/web/Orientation.html

http://06wj.blog.163.com/blog/static/834657352012058123053/

自己也學着寫了個小示例：白色小球根據重力滾動（放到移動設置上看）

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="gbk"/>
  5     <meta name="viewport"
  6           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7     <meta name="apple-mobile-web-app-capable" content="yes">
  8     <meta name="apple-touch-fullscreen" content="yes">  
  9     <style>
 10         .test{
 11             border:2px solid green;
 12             width:300px;
 13             height:350px;
 14             background: #000;
 15             position: relative;
 16             COLOR:#FFF;
 17         }
 18         .test #ball{
 19             width:12px;
 20             height:12px;
 21             background: #fff;
 22             -webkit-border-radius:6px;
 23             position: absolute;
 24             left:0;
 25             right: 0;
 26         }
 27     </style>
 28 </head>
 29 <body>
 30 
 31 <h2>設備方向感應測試</h2>
 32 <div id="msg"></div>
 33 
 34 <div id='test' tabindex='0' class="test">
 35     <!--<img src="img/3.png" id="ball">-->
 36     <div id="ball"></div>
 37 </div>
 38 
 39 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo" alt="">
 40 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo2" alt="">
 41 
 42 <script>
 43     function Orientation(selector){}
 44     Orientation.prototype.init = function(){
 45         window.addEventListener('deviceorientation', this.oriListener, false);
 46         window.addEventListener('MozOrientation', this.oriListener, false); //為firefox所用
 47         window.addEventListener('devicemotion', this.oriListener, false);   //重力感應
 48     }
 49 
 50     Orientation.prototype.oriListener = function(e) {
 51         setTimeout(function(){
 52             handler(e);
 53             deviceMotionHandler(e)
 54         },10);
 55 
 56         function handler(e){
 57             // For FF3.6+
 58             if (!e.gamma && !e.beta) {
 59                 // angle=radian*180.0/PI 在firefox中x和y是弧度值,
 60                 e.gamma = (e.x * (180 / Math.PI)); //轉換成角度值,
 61                 e.beta = (e.y * (180 / Math.PI)); //轉換成角度值
 62                 e.alpha = (e.z * (180 / Math.PI)); //轉換成角度值
 63             }
 64             /* beta:  -180..180 (rotation around x axis) */
 65             /* gamma:  -90..90  (rotation around y axis) */
 66             /* alpha:    0..360 (rotation around z axis) (-180..180) */
 67 
 68             var gamma = e.gamma
 69             var beta = e.beta
 70             var alpha = e.alpha
 71 
 72             if(e.accelerationIncludingGravity){
 73                 // window.removeEventListener('deviceorientation', this.orientationListener, false);
 74                 gamma = e.accelerationIncludingGravity.x*300
 75                 beta = -e.accelerationIncludingGravity.y*300
 76                 alpha = event.accelerationIncludingGravity.z*300
 77             }
 78 
 79             if (this._lastGamma != gamma || this._lastBeta != beta) {
 80                 document.querySelector("#msg").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0)
 81 
 82 
 83                 var style = document.querySelector("#ball").style;
 84                 style.left = gamma/90 * 200 + 150 +"px";
 85                 style.top = beta/90 * 200 + 100 +"px";
 86 
 87 
 88                 this._lastGamma = gamma;
 89                 this._lastBeta = beta;
 90             }
 91         }
 92 
 93         function deviceMotionHandler(e) {
 94             /*
 95             if(e.accelerationIncludingGravity){
 96                 var gx = e.accelerationIncludingGravity.x;
 97                 var gy = e.accelerationIncludingGravity.y;
 98                 var gz = e.accelerationIncludingGravity.z;
 99             }
100              var facingUp = -1;
101              if (gz > 0) {
102              facingUp = +1;
103              }
104              var tiltLR = Math.round(((gx) / 9.81) * -90);
105              var tiltFB = Math.round(((gy + 9.81) / 9.81) * 90 * facingUp);
106 
107              //document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
108              // document.getElementById("moCalcTiltFB").innerHTML = tiltFB;
109 
110              var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)";
111              document.getElementById("imgLogo").style.webkitTransform = rotation;
112            */
113 
114             var gamma = e.gamma
115             var beta = e.beta
116             var alpha = e.alpha
117 
118             var tiltLR =gamma; //Math.round(((beta) / 9) * -90);
119             var tiltFB = beta;
120 
121             var rotation = "rotate(" + tiltLR + "deg)";
122             var rotation2 = "rotate(" + tiltFB + "deg)";
123             var style = document.querySelector("#imgLogo").style;
124             var style2 = document.querySelector("#imgLogo2").style;
125             style.webkitTransform = rotation;
126             style2.webkitTransform = rotation2;
127         }
128     };
129 
130     (new Orientation()).init();
131 </script>
132 </body>
133 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端搖一搖與重力感應事件 JS移動客戶端--觸屏滑動事件 js實現touch移動觸屏滑動事件 JS移動客戶端--觸屏滑動事件移動端與PC端的觸屏事件 html5之移動觸屏事件原生js實現網頁觸屏滑動 JS案例之5——移動端觸屏滑動 js滑動觸屏事件監聽 JS移動客戶端--觸屏滑動事件 banner圖效果