javascript html5摇一摇功能的实现


Posted in Javascript onApril 19, 2016

通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份。
知识要点 

1、DeviceMotionEvent
    这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介绍:
deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。

 

2、事件简介
 window.addEventListener("deviceorientation",function(event){// 处理event.alpha、event.beta及event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0};

这是 deviceorientation事件返回的参数,为了获得罗盘指向,可以简单的使用360度减去alpha。若设被平行于水平表面,其罗盘指向为(360 - alpha)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90,alpha和gamma无关。 用户手持设备,面向alpha角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下

{alpha:270- alpha,
 beta:0,
 gamma:90};

 注册一个devicemotion事件的接收器:

window.addEventListener("devicemotion",function(event){// 处理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);

 

 将设备安置于车辆之上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为v,向右侧进行半径为r的转弯。设备记录acceleration 和accelerationIncludingGravity在位置x处的情况,同时设备还会记录rotationRate.gamma的负值:

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};

 功能实现

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.accelerationIncludingGravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 }

首先判断浏览器是否支持该事件。
YaoYiYao用来检测是否对手机进行摇动操作,具体就是获取手机的的移动数据,将其存在一个外部变量中,当下次又触发摇动事件时,判断上次的摇动坐标 和现在的摇动坐标 是否处于一个频繁调动的范围:Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 满足这种条件的话,就是手机正处于摇动状态,在if语句里面添加进你要执行的摇一摇代码即可。

以上就是html5摇一摇功能的实现思路,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
switchery按钮的使用方法
Dec 18 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
一些实用性较高的js方法
Apr 19 #Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
You might like
PHP图像识别技术原理与实现
2016/10/27 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
为python设置socket代理的方法
2015/01/14 Python
python循环监控远程端口的方法
2015/03/14 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python2包含中文报错的解决方法
2018/07/09 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
pytorch permute维度转换方法
2018/12/14 Python
Python3中exp()函数用法分析
2019/02/19 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
求职信模板标准格式范文
2014/02/23 职场文书
班级文化建设标语
2014/06/23 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书