html 重力感应效果,HTML5 重力感应效果，实现摇一摇效果

HTML5 重力感应效果，实现摇一摇效果

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;

}

//摇晃的力度

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+'
Y:'+last_y+'
Z:'+last_z;

//如果速度大于摇晃的力度那么执行alert

if (speed > SHAKE_THRESHOLD) {

alert('摇一摇');

}

//判断是否支持重力感应

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false);

} else {

alert('not support mobile event');

}

html 重力感应效果,HTML5 重力感应效果，实现摇一摇效果相关推荐

html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
html 滑屏效果,HTML5 web app实现手动页面滑屏效果
现在很流行在H5页面滑屏的效果,特别是在微信浏览器窗口中,几乎很多推广的活动是使用到上下滑屏,一开始和前端的同事一起合作写滑屏效果花费了很多的时间,而且写出来的页面在浏览器的兼容上踩了很多坑,于是果断 ...
html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
HTML5手机重力与方向感应的应用——摇一摇效果
HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重 ...
html5 360 重力感应,H5案例分享：html5重力感应事件
html5重力感应事件一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
H5监听摇一摇和手机倾斜事件（重力感应）
摇一摇功能(DeviceMotion) 摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等.它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事 ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果
passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...

html 重力感应效果,HTML5 重力感应效果，实现摇一摇效果

html 重力感应效果,HTML5 重力感应效果，实现摇一摇效果相关推荐

最新文章

热门文章