移动终端学习2：触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面，用户数量也在不断迅速增长（市场研究机构 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，不推荐）
- 缩放、捏合（pinch）
- 三只或更多只指
- swipe
- 抓（claw pinch）
- eg. 回到主界面
看了这么多触屏手势，我们再来看看有哪些js的触屏事件
触屏原生js事件示例：
2. 重力感应：方向&重力（Orientation & Motion）
依赖 磁阻传感器、加速度传感器、角加速度传感器（陀螺仪）、重力传感器、方向传感器（电子罗盘）等
- 指南针（compass）
- 地图导航（map、navigation）
- 现实增强（Augmented reality，AR）
- 摇一摇（shaking gesture）
- 游戏控制（game control）
- 计步器
<!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事件及重力感应的更多相关文章
- 手机触屏的js事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- 触屏Tap模拟事件
触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...
- 原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
- jquery -- 触屏设备touch事件
几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...
- 原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...
- 学习记录----简单的原生js路由
在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...
随机推荐
- pomelo windows 环境
1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program File ...
- Nginx和Tengine解决高并发和高可用，而非推荐Apache
什么是Nginx 什么是Tengine 看看国内大公司在用Nginx和Tengine吗? 步骤一:进入 https://www.taobao.com/,按F12.可看到 有很多APP对淘宝进行请求. ...
- 最大连续子数组问题-homework-01
1)先写我的 github 的介绍: github 的域名:http://www.github.com/zhuifeng1022 登入 github 大概是下面的视图: 按照助教的方法:我已经建好了代 ...
- HDU 4950 Monster （水题）
Monster 题目链接: http://acm.hust.edu.cn/vjudge/contest/123554#problem/I Description Teacher Mai has a k ...
- POJ Wormholes （SPFA）
http://poj.org/problem?id=3259 Description While exploring his many farms, Farmer John has discovere ...
- 需要熟记的git命令
需要熟记的github常用命令 总结一下ubuntu下github常用的命令,设置部分跳过,假设repository的名字叫hello-world: .创建一个新的repository: 先在gith ...
- SGU 171 Sarov zones （贪心）
题目 SGU 171 相当好的贪心的题目!!!!! 题目意思就是说有K个赛区招收参赛队员,每个地区招收N[i]个,然后每个地区都有一个Q值,而N[i]的和就是N,表示总有N个参赛队员,每个队员都有 ...
- JMS开发(一):基础理论认知
JMS全称是Java Message Service.其是JavaEE技术规范中的一个重要组成部分,是一种企业消息处理的规范.它的作用就像一个智能交换机,它负责路由分布式应用中各个组件所发出的消息. ...
- 初学Android 一 基本开发环境
Android平台架构 1.应用程序层: 核心应用程序和普通应用程序,他们都是平级的,都可以平等的调用下层. 2.应用程序框架:供上一层调用的API. 3.函数库: 不能被直接调用的C/C++库的集合 ...
- Proactor设计模式：单线程高并发
Boost::Asio为同步和异步操作提供了并行支持,异步支持基于前摄器模式,这种模式的优点和缺点可能比只同步或反应器方法要低. 让我们检查一下Boost::Asio是如何实现前摄器模式的,没有引用基 ...