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 相关文章推荐
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
js与applet相互调用的方法
Jun 22 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
JavaScript经典案例之简易计算器
Aug 24 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读写文件的方法(生成HTML)
2006/11/27 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
php批量上传的实现代码
2013/06/09 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php中动态调用函数的方法
2015/03/16 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
深入理解JS异步编程-Promise
2019/06/03 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python max内置函数详细介绍
2016/11/17 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
几个MySql的面试题
2013/04/22 面试题
干部鉴定材料
2014/05/18 职场文书
毕业设计致谢语
2015/05/14 职场文书
美丽人生观后感
2015/06/03 职场文书
军训后的感想
2015/08/07 职场文书