html5摇一摇[转]
写在前面
年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。
原文地址：http://www.cnblogs.com/waitingbar/p/4682215.html
测试
效果还行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>摇一摇</title>
<style type="text/css">
*{padding:;margin: }
.shake_box {
background: url(images/xiaolian.png) no-repeat #1e2020 center center;
position: fixed;
top : ;
left: ;
width : %;
height : %;
}
.shakTop,.shakBottom {
background: #282c2d;
position : fixed;
left : ;
width : %;
height: %;
}
.shakTop {top : ;}
.shakBottom {bottom : ;} .shakTop span,.shakBottom span{
background: url(images/shakBox.png) no-repeat;
position : absolute;
left: %;
width : 450px;
height: 254px;
margin: -275px;
}
.shakTop span{bottom : ;}
.shakBottom span{
background-position: -254px;
top : ;
} .shake_box_focus .shakTop{
animation : shakTop 1s linear;
-moz-animation : shakTop 1s linear;
-webkit-animation: shakTop 1s linear;
-ms-animation : shakTop 1s linear;
-o-animation : shakTop 1s linear;
}
.shake_box_focus .shakBottom{
animation : shakBottom 1s linear;
-moz-animation : shakBottom 1s linear;
-webkit-animation: shakBottom 1s linear;
-ms-animation : shakBottom 1s linear;
-o-animation : shakBottom 1s linear;
} /* 向上拉动画效果 */
@-webkit-keyframes shakTop {
% {top: ;}
% {top: -200px;}
% {top: ;}
}
@-moz-keyframes shakTop {
% {top: ;}
% {top: -200px;}
% {top: ;}
}
@-ms-keyframes shakTop {
% {top: ;}
% {top: -200px;}
% {top: ;}
}
@-o-keyframes shakTop {
% {top: ;}
% {top: -200px;}
% {top: ;}
} /* 向下拉动画效果 */
@-webkit-keyframes shakBottom {
% {bottom: ;}
% {bottom: -200px;}
% {bottom: ;}
}
@-moz-keyframes shakBottom {
% {bottom: ;}
% {bottom: -200px;}
% {bottom: ;}
}
@-ms-keyframes shakBottom {
% {bottom: ;}
% {bottom: -200px;}
% {bottom: ;}
}
@-o-keyframes shakBottom {
% {bottom: ;}
% {bottom: -200px;}
% {bottom: ;}
}
</style> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//先判断设备是否支持HTML5摇一摇功能
if (window.DeviceMotionEvent) {
//获取移动速度，得到device移动时相对之前某个时间的差值比
window.addEventListener('devicemotion', deviceMotionHandler, false);
}else{
alert('您好，你目前所用的设置好像不支持重力感应哦！');
} //设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了
var shakeThreshold = ;
//设置最后更新时间，用于对比
var lastUpdate = ;
//设置位置速率
var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=; function deviceMotionHandler(event){ //获得重力加速
var acceleration =event.accelerationIncludingGravity; //获得当前时间戳
var curTime = new Date().getTime(); if ((curTime - lastUpdate)> ) { //时间差
var diffTime = curTime -lastUpdate;
lastUpdate = curTime; //x轴加速度
curShakeX = acceleration.x;
//y轴加速度
curShakeY = acceleration.y;
//z轴加速度
curShakeZ = acceleration.z; var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * ; if (speed > shakeThreshold) {
//TODO 相关方法，比如： //播放音效
shakeAudio.play();
//播放动画
$('.shake_box').addClass('shake_box_focus');
clearTimeout(shakeTimeout);
var shakeTimeout = setTimeout(function(){
$('.shake_box').removeClass('shake_box_focus');
},) } lastShakeX = curShakeX;
lastShakeY = curShakeY;
lastShakeZ = curShakeZ;
}
} //预加摇一摇声音
var shakeAudio = new Audio();
shakeAudio.src = 'sound/shake_sound.mp3';
var shake_options = {
preload : 'auto'
}
for(var key in shake_options){
if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){
shakeAudio[key] = shake_options[key];
}
}
</script>
</head> <body>
<div class="shake_box">
<div class="shakTop"><span></span></div>
<div class="shakBottom"><span></span></div>
</div>
</body>
</html>
html5摇一摇[转]的更多相关文章
- HTML5实现摇一摇
一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...
- html5实现摇一摇功能
原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...
随机推荐
- ReactNative之style使用指南
ReactNative中能使用的css样式有哪些呢Valid style props: [ "alignItems", "alignSelf", & ...
- 虚拟机安装Mac OS X ----- VM12安装Mac OS X
Windows下虚拟机安装Mac OS X -– VM12安装Mac OS X 10.11 随着Iphone在国内大行其道,越来越多的开发者涌入iOS开发大军 中,但都苦于没有苹果机,本文即将介绍WI ...
- 使用AVFoundation仅仅生成缩略图，不进行播放视频（本地和网络文件都可以创建视频缩略图）
使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...
- Jenkins进阶系列之——07更改Jenkins的主目录
Jenkins默认会存放在用户主目录下的.jenkins文件夹中 如:Linux root用户:/root/.jenkins 注意:这是linux版本的.windows系统请自行更改.这个值在Jenk ...
- 定制类自己的的new_handler
C++中的new操作符首先使用operator new函数来分配空间,然后再在此空间上调用类的构造函数构造对象.当operator new无法分配所需的内存空间时,默认的情况下会抛出一个bad_all ...
- 【逆向怎么玩】 动态调试一款牛逼C++ IDE实录
声明 本篇只从逆向兴趣出发,研究其程序运行原理. CLion程序版权为jetBrains所有. 注册码授权为jetBrains及其付费用户所有. 不会释出任何完整的源代码. 涉及能直接推算出注册码的地 ...
- Unity3D 文字滚动跑马灯效果
需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...
- [BZOJ1070][SCOI2007]修车（最小费用最大流）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1070 分析: 把每个工人拆成N个点.记为A[i,j]表示第i个工人修倒数第j辆车. 每 ...
- jQuery理解之（二）功能函数
在javascript编程中,开发者通常需要编写很多小程序来实现一些特定的功能.例如浏览器检测,字符串处理.数组的编辑等.jQuery对这些常用的程序进行了总结,提供了很多实用的函数. 1.检测浏览器 ...
- Grunt-cli的执行过程以及Grunt加载原理
通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命 ...