Html5+JS实现手机摇一摇
HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。
DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码
HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的`实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。
其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。
DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。
1. [代码]监听运动传感事件
代码如下:
if (ceMotionEvent) {
ventListener(‘devicemotion’,deviceMotionHandler, false);
}
2. [代码]获取含重力的加速度
代码如下:
function deviceMotionHandler(eventData) {
var acceleration =lerationIncludingGravity;
}
3. [代码]核心方法实现代码
代码如下:
var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function deviceMotionHandler(eventData) {
var acceleration =lerationIncludingGravity;
var curTime = newDate()ime();
if ((curTime – lastUpdate)> 100) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = (x +y + z – last_x – last_y – last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}
-
万恶的function在javascript中的运用实例分析
javascript中最有特色而又让你困惑的function算一个了下面看一下常用操作复制代码代码如下:functiondoit(){.....}doit();javascript中的函数我们可以把它当作方法使用复制代码代码如下:varobj=newObject();=function(){.....}();而function实际上就是对象(即F...
-
浅谈jquery 注意事项与常用语法
1、关于选择器中含有特殊符号选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如:复制代码代码如下:bb如果按照普通的方式来获取,例如:复制代码代码如下:$("#id#b");$("#id[1]");以上代码不能正确获取到元素,正确的写法如下:复...
-
javascript操作select元素案例分析
本文实例讲述了javascript操作select元素的.用法。分享给大家供大家参考。具体分析如下:这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢...
-
css经典教程
css经典教程1有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写“最近”的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。我们在中向大家介绍过很多CSS经验与技巧,这些东西都发布在/css/...
相关文章
- HTML5&details标签属性
- html.jsp和srevlet的关系
- Jolie drops battle over perfume named Shilohy英语作文
- Lantern Festival,The 15th day of the 1st lunar month英语作
- Java中hashmap和hashtable的区别
- Javascript实例教程如何使用HoTMetal
- Box Jellyfish Eyes Aim At The Trees美文欣赏
- 关于MyEclipse代码提示设置包括html和jsp的代码
- Html/Css新手入门攻略
- Unit5 My clothes A Let’s talk评课稿