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 ...
随机推荐
- Java集合---Arrays类源码解析
一.Arrays.sort()数组排序 Java Arrays中提供了对所有类型的排序.其中主要分为Primitive(8种基本类型)和Object两大类. 基本类型:采用调优的快速排序: 对象类型: ...
- [CareerCup] 14.1 Private Constructor 私有构建函数
14.1 In terms of inheritance, what is the effect of keeping a constructor private? 这道题问我们用继承特性时,如果建立 ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- jquery实现文件异步上传
前言 这里用了2个JS插件,一个是Jquery原生js,我的版本是jquery-1.7.2.min.js,另一个是jquery.form.js.这个form.js 是关键,不可少哦.另外, 我的服务器 ...
- nodeJs--模块module.exports与实例化方法；
在nodejs中,提供了exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象.而在e ...
- 谏牲口TT十思疏
予闻:求木之长着,必固其根本:欲流之远者,必浚其泉源:思吾之长者,必积其学识.源不深而望流之远,根不固而求木之长,识不积而思指日之安,斯虽下愚,知其不可,而况于TT乎?TT当举家之重,虑只此一生,将孝 ...
- 游戏服务器端引擎--DogSE的设计
就DogSE的设计目标来说,它定位为千人左右的页游服务器,在不修改任何底层模块的情况下可以快速的写各种游戏业务.就算是新人在熟悉2~3天后也可以开始写一个游戏. 项目可以从github获得,访问地址: ...
- ThinkPHP中的跨控制器调用与框架执行流程
一.跨控制器调用 UserController.class.php <?php namespace Home/Controller use Think/Controller class User ...
- [C#基础]说说委托+=和-=的那些事
写在前面 为什么会突然想说说委托?原因吗,起于一个同事的想法,昨天下班的路上一直在想这个问题,如果给委托注册多个方法,会不会都执行呢?为了一探究性,就弄了个demo研究下. += 大家都知道委托都继承 ...
- android常用的弹出提示框
我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...