<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title> HTML5 重力感应效果,实现摇一摇效果 </title>
<style>
html,body,div,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
body{
width:100%;
}
#box{
width:90%;
height:80px;
background-color:orange;
margin:0 auto;
color:#fff;
background-position: center -50px;
}
</style>
</head>
<body> <div id="box"></div> <script>
//摇晃的力度
var SHAKE_THRESHOLD = 2000;
var last_update = 0;
//初始化重力感应位置
var x = y = z = last_x = last_y = last_z = 0; function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ( (curTime - last_update) > 100 ) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
last_x = x;
last_y = y;
last_z = z; //获取 X Y Z 的数值
document.getElementById('box').innerHTML = 'X:'+last_x+'<br> Y:'+last_y+'<br> Z:'+last_z; //如果速度大于摇晃的力度那么执行alert
if (speed > SHAKE_THRESHOLD) {
alert('摇一摇');
}
}
}
//判断是否支持重力感应
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('not support mobile event');
} </script>
</body>
</html>

  

HTML5 重力感应效果,实现摇一摇效果的更多相关文章

  1. H5案例分享:html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  2. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  3. HTML5重力感应小球冲撞动画实现教程

    今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...

  4. h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  5. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  6. html5重力感应事件

    if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); ...

  7. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  8. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  9. 手机摇一摇效果-html5

    1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. C# 数据库访问

    C# 数据库访问 分类: C#学习笔记2011-07-05 11:26 515人阅读 评论(0) 收藏 举报 数据库c#datasettextboxcommandexception   目录(?)[+ ...

  2. uoj#34

    模板 #include<bits/stdc++.h> #define pi acos(-1) using namespace std; ; int n, m, L, x; int r[N] ...

  3. 父页面调用子页面js的方法

    iframe子页面调用父页面javascript函数的方法今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面 ...

  4. bzoj1088扫雷(搜索)

    1088: [SCOI2005]扫雷Mine Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3669  Solved: 2153[Submit][St ...

  5. Akka源码分析-官方文档说明

    如果有小伙伴在看官方文档的时候,发现有些自相矛盾的地方,不要怀疑,可能是官方文档写错了或写的不清楚,毕竟它只能是把大部分情况描述清楚.开源代码一直在更新,官方文档有没有更新就不知道了,特别是那些官方不 ...

  6. IT架构师介绍-软件架构设计学习第一天(非原创)

    文章大纲 一.架构师定义二.架构师分类与具备能力三.研发人员发展的技术路线四.架构师知识体系五.参考文章   一.架构师定义   什么是架构师,这个聊架构话题时永恒的问题.每个公司对架构师的定位也有所 ...

  7. phpStorm更新后配置svn无法使用

    phpStorm迎来新的更新,结果之前配置的svn竟然无法使用啦,快捷键一类也没有作用.各种查找解决方案,最后找到解决方案.点击File找到Settings,找到Plugins这个部分,这个部分是管理 ...

  8. 面向对象之继承-5种JavaScript继承的方法

    今天我们讨论一下常用的几种继承方法:首先我们创建一个动物函数Animal: function Animal () { this.species = '动物' }再写准备名叫猫咪的函数Cat: func ...

  9. Centos 7 安装google 浏览器(yum 方式)

    过程: 1  vim /etc/yum/repo.s/google_chrome.repo 2 添加如下内容: [google-chrome] name=google-chrome          ...

  10. SVN系列学习(三)-TortoiseSVN的基本操作

    1.添加(Add) 在ZJHZXS_01中,新建一个记事本,在记事本中写上一下内容,然后保存,再打开,再保存 这个时候,在选中文件夹ZJHZXS_01,并右击[SVN Commit] 提交成功,加了一 ...