HTML5使用DeviceOrientation实现摇一摇功能


Posted in Javascript onJune 05, 2015

HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。

DeviceOrientation包括两个事件:

1、deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

HTML

页面上有一个div#hand,用来放置一个手摇的图片,div#result用来展示摇动后的结果信息。

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div>

我们可以使用CSS3来增强页面效果,使用-webkit-animation动画效果实现手摇图片的动态效果,具体请下载源代码查看。

Javascript

“摇一摇”这个动作即“一定时间内设备了一定距离”,因此通过devicemotion监听设备晃动获取到的x, y, z轴的 值在一定时间范围内的变化率,即判断设备是否有进行晃动。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
HTML5判断设备晃动的代码我们使用已经封装好的shake.js,项目地址:https://github.com/alexgibson/shake.js。

<script src="shake.js"></script>

首先实例化Shake,然后启动开始监听设备运动情况,监听设备运动,回调监听结果:shakeEventDidOccur。

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜,摇得"+arr[num]+"!"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
};

这里,函数shakeEventDidOccur()可以自定义,本例是将摇晃后的结果返回在页面上展示出来,请看DEMO演示。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js 控制图片大小核心讲解
Oct 09 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 #Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 #Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 #Javascript
在JavaScript中使用NaN值的方法
Jun 05 #Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 #Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 #Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 #Javascript
You might like
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
一端时间轮换的广告
2006/06/26 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Django实现自定义404,500页面教程
2017/03/26 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
详解python logging日志传输
2020/07/01 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
高二美术教学反思
2014/01/14 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
学习十八大标语
2014/10/09 职场文书
社区元宵节活动总结
2015/02/06 职场文书
婚礼家长致辞
2015/07/27 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android