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 ...
随机推荐
- JS 之DOM对象(2)
http://www.cnblogs.com/zourong/p/4792394.html 这篇文件介绍了DOM1中的一些属性和方法,下面的内容主要介绍DOM2和DOM3中新增的内容. 框架的变化 框 ...
- node-webkit 写桌面系统
[1.使用nodejs] 和很多人一样,百度了很久很久,没看到有恰到点的解释的,当时我已经怀疑到是配置出来的,而非引js,最后确实啥都不用引 实际关键在package.json加入设置"no ...
- 足球运动训练心得及经验分析-c语言学习调查
在准备预备作业02之前,我参考娄老师的提示,阅读了<[做中学(Learning By Doing)]之乒乓球刻意训练一年总结>一文. 在文章描述的字里行间,给予我的印象是系统.负责,娄老师 ...
- spring+mybatis实现读写分离
springmore-core spring+ibatis实现读写分离 特点 无缝结合spring+ibatis,对于程序员来说,是透明的 除了修改配置信息之外,程序的代码不需要修改任何东西 支持sp ...
- Ztree异步加载自动展开节点
在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...
- 第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- 第一章：Javascript语言核心
本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...
- Webbench网站压力测试
Webbench是有名的网站压力测试工具,能测试处在相同硬件上,不同服务的性能以及不同硬件上同一个服务的运行状况.webBech的标准测试可以向我们展示服务器的 两项 内容:每秒钟相应请求数和每秒 ...
- Go-MySQL-Driver：一个Go语言的轻量级极速的mysql驱动
Go语言的 database/sql 包的一个 MySQL驱动. 特性 轻量级与快速 原生Go语言,没有C绑定,只有纯Go 没有不安全的操作(类型转换等) 动态处理崩溃的连接 动态连接池 支持大于16 ...
- 每天一个linux命令（48）：netstat命令
netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...