Html5+JS实现手机摇一摇功能

所属分类: 网页制作 / html5 阅读数: 2032
收藏 0 赞 0 分享

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 (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler, false);
}

2. [代码]获取含重力的加速度

复制代码
代码如下:

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}

3. [代码]核心方法实现代码

复制代码
代码如下:

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;</p> <p>function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;</p> <p>var curTime = newDate().getTime();</p> <p>if ((curTime – lastUpdate)> 100) {</p> <p>var diffTime = curTime -last_update;
last_update = curTime;</p> <p>x = acceleration.x;
y = acceleration.y;
z = acceleration.z;</p> <p>var speed = Math.abs(x +y + z – last_x – last_y – last_z) / diffTime * 10000;</p> <p>if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}

更多精彩内容其他人还在看

使用html5制作loading图的示例

这篇文章主要介绍了使用html5制作loading图的示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5读取本地文件示例代码

这篇文章主要介绍了html5读取本地文件的具体实现,html结构样式、Css样式及js代码如下,需要的朋友可以看看哦
收藏 0 赞 0 分享

html5菜单折纸效果

这篇文章主要介绍了html5菜单折纸效果,类似猎豹浏览器安装时的用户须知效果,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5添加鼠标悬浮音响效果不使用FLASH

使用HTML5+jQuery添加鼠标悬浮音响效果,兼容Firefox 3.5+, Chrome 3+等等,使用html5的audio元素,随机播放一个mp3音效,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5中的Scoped属性使用实例

HTML5的变革给我们带来了大量非常有用的新属性,比如placeholder, download, hidden,等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力
收藏 0 赞 0 分享

HTML5的hidden属性兼容老浏览器的方法

HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等
收藏 0 赞 0 分享

html5基础标签(html5视频标签 html5新标签用法)

html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧
收藏 0 赞 0 分享

编写html5时调试发现脚本php等网页js、css等失效

在编写html5时简单的调试了下与PHP协同使用后,发现在不少情况下js、css等会失效,调试后发现网页在跳转时仍有缓存,需要指出原网页和跳转后网页的关系,具体代码如下
收藏 0 赞 0 分享

html5使用canvas实现跟随光标跳动的火焰效果

本示例通过Javascript使用HTML5的canvas元素在屏幕上显示一个跳动的火焰,火焰会跟随光标跳动
收藏 0 赞 0 分享

html特殊符号示例 html特殊字符编码对照表

本文提供了一个html特殊符号示例,最后给出了html特殊字符编码对照表,大家可以看一下,在做HTML编码的时候总会用到的
收藏 0 赞 0 分享
查看更多