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 相关文章推荐
文本加密解密
Jun 23 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
纯JS代码实现气泡效果
May 04 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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
adodb与adodb_lite之比较
2006/12/31 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
php与js的区别是什么
2013/08/05 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python3.7 的新特性详解
2019/07/25 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python 从attribute到property详解
2020/03/05 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
党员公开承诺书内容
2014/05/20 职场文书
公司员工体检通知
2015/04/21 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫