HTML5 重力感应效果,实现摇一摇效果
<!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 重力感应效果,实现摇一摇效果的更多相关文章
- H5案例分享:html5重力感应事件
html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
- html5重力感应事件之DeviceMotionEvent
前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...
- HTML5重力感应小球冲撞动画实现教程
今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...
- h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- 移动端html5重力感应
下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/ http://06wjin.sinaapp.com/billd/test. ...
- html5重力感应事件
if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); ...
- 【HTML5 】手机重力与方向感应的应用——摇一摇效果
http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 手机摇一摇效果-html5
1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- SPOJ XMAX - XOR Maximization
XMAX - XOR Maximization Given a set of integers S = { a1, a2, a3, ... a|S| }, we define a function X ...
- InfluxDB 分布式时间序列数据库环境搭建——据qcon大会2016qiniu说集群很坑且闭源了
InfluxDB 分布式时间序列数据库环境搭建 1. 环境说明 Ubuntu14.04 + influxDB V0.10.1 搭建3个节点的分布式数据库,副本数量2,各节点之间自动进行数据备份并 ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- Kconfig详解-文件的基本要素 ***
当执行make menuconfig时会出现内核的配置界面,所有配置工具都是通过读取"arch/$(ARCH)Kconfig"文件来生成配置界面,这个文件就是所有配置的总入口,它会 ...
- openStack调试
- Istio 1.1部署实践
前提条件 正确安装配置Kubernetes集群 CentOS Linux release 7.5.1804 安装 下载istio 1.1版本 [root@vm157 ~]# wget https:// ...
- 使用adb进行关机(转载)
转自:http://hi.baidu.com/fangqianshu/item/dc52b92d31b2dd1542634a3d 其实进入adb shell,然后执行reboot -p或者直接在命令行 ...
- Rails 服务器架设失败问题
更新: 2017/09/14 补充了简单的确认号码的方法 A server is already running. Check /Users/...../pids/server.pid. Exitin ...
- 慕课网6-2 作业:js实现轮播特效
小伙伴们,掌握了JavaScript的语法.流程控制语句.内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图.效果图如下: 具体交互效果图参考gif动态效果图,gif效果 ...
- TypeScript `infer` 关键字
考察如下类型: type PromiseType<T> = (args: any[]) => Promise<T>; 那么对于符合上面类型的一个方法,如何得知其 Prom ...