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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
删除节点的jquery代码
Jan 13 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
详解Vite的新体验
2021/02/22 Javascript
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
详解Python3 pickle模块用法
2019/09/16 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
工作年限证明模板
2015/06/15 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python