移动终端学习2:触屏原生js事件及重力感应

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

1. 触屏手势


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

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

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

 
移动终端学习2:触屏原生js事件及重力感应
  • 一只手指
    • 轻扫(swipe)
    • 轻击(tap)
    • 点击(click)
    • 双击(double click)
    • 拖动(pan)
    • 长按(long press)
  • 两只手指
    • 缩放、捏合(pinch)
      • eg.缩放网页、图片
    • 旋转(rotation)
    • 滚动(scroll,类似 mousewheel,不推荐)
  • 三只或更多只指
    • swipe
    • 抓(claw pinch)
      • eg. 回到主界面

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

触屏原生js事件示例:

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

2. 重力感应:方向&重力(Orientation & Motion)


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

移动终端学习2:触屏原生js事件及重力感应

  • 指南针(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>
 
上一篇:仿今日头条app手机端顶部触屏滑动导航


下一篇:手机触屏的js事件