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 ...
随机推荐
- sql截取
String sql2="select count(*) from t_testuser where substr(INSETTIME,1,10)=to_char(sysdate,'yyyy ...
- iOS——数据安全性问题小结
在移动互联网快速发展的今天,iOS应用直接运行在用户的手机上,与运行在服务器后台服务相比,更有可能被黑客攻击. a.网络安全: 1.1 安全地传输用户密码 事先生成一对用于加密的公私钥,客户端登录的时 ...
- 使用AVFoundation仅仅生成缩略图，不进行播放视频（本地和网络文件都可以创建视频缩略图）
使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...
- openssl实践总结
openssl实验总结 OPENSSL简介 OpenSSL项目是一个协作开发一个健壮的,商业级的,全功能的,并且开放源代码工具包,它实现了安全套接字层(SSL v2/v3)和传输层安全(TLS v1) ...
- 利用php实现文件迁移重命名
首先表明,这是一个悲伤的故事. 暑假来临,学校安排我们到某软件外包公司实习,想想不用面试也是蛮方便的,可以借此机会向大牛学习学习,虽然没有工资(据说学校还交了600块的保险),但想想还是蛮期待的,但真 ...
- Redis入门学习（一）——安装配置
最近马上要找实习了,听学长说他们公司里用了redis来解决缓存问题,在大三结束前来学习一下. 问:Redis是什么? 答:(官方)REmote DIctionary Server(Redis)是一个K ...
- sql server 2008 数据库的完整性约束
一.数据库完整性概述 1.数据库的完整性: ①数据库的完整性是指数据的正确性和相容性 ②数据库完整性是防止不合语义或不正确的数据进入数据库 ③完整性体现了是否真实地反映现实世界 例: 学 ...
- jTemplate —— 基于jQuery的javascript前台模版引擎
reference: http://blog.csdn.net/lexinquan/article/details/6674102 http://blog.csdn.net/kuyuyingz ...
- [设计模式] javascript 之 装饰者模式
装饰者模式说明 说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向 ...
- github的初次体验及管理代码的心得
周六早上的课上,助教给我们演示了一遍如何上传和下载代码库,新建代码库等等,但是是在linux上的,而我的笔记本的操作系统是win7的.而在教室中的尝试因为网络原因,虽然可以上github的网站,但是下 ...