<?php
/**
* Created by JetBrains PhpStorm.
* User: 张华
* Date: 16-3-4
* Time: 上午11:29
* To change this template use File | Settings | File Templates.
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>手机摇一摇</title>
<!--css 公共部分 css reset-->
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<style type="text/css">
.shake_box{
position: fixed; /*固定位置， 后需要重新定位*/
top: 0;
left: 0;
width: 100%; /*手持移动端,建议设为百分比*/
height: 100%;
background: url('images/xiaolian.png') no-repeat #1e2020 center center ; /*背景笑脸图片*/
}
.shake_box_top,.shake_box_bottom{
position: fixed;
left: 0;
width: 100%;
height: 50%; /*在摇一摇的时候 上下两个普通是需要分开、合并,这里设为 50%*/
background-color: #282c2d; /*设置背景颜色 黑色*/
}
/*分别定位 两个盒子的 顶部 下部 边距*/
.shake_box_top{top: 0; }
.shake_box_bottom{ bottom: 0;}
/*设置 上下两个盒子里面的span 容器摇一摇 的那个图片*/
.shake_box_top span,.shake_box_bottom span{
background: url('images/shakBox.png') no-repeat;
position: absolute;
left: 50%;
width: 450px;/* ps 测量 图片宽带 为 450px*/
height: 254px;; /*ps 测量 图片高度504px 那么两个span 各占一半 254px*/
margin: 0 0 0 -275px; /*调整位置边距*/
}
.shake_box_top span{ bottom: 0;} /*设置 上面span 的下边距 为0*/
.shake_box_bottom span{ top: 0; background-position: 0 -254px;} /*将两张图片定位后 看起来是一张图片*/
/*发生变化之后 发生变化之后内容的css样式*/
.shake_box_rest{
z-index: 1;
position: relative;
top:200px;
left:200px;
}
/*
这里对css 做一个封装
定义变量
*/
:root{
--keyframes-topBoxName:shake_box_top;
--keyframes-bottomBoxName:shake_box_bottom;
}
</style>
<!-- 加载 css 动画 文件
使用CSS3来增强页面动画效果，-webkit-animation动画效果实现手摇图片的动态效果
-->
<link rel="stylesheet" type="text/css" href="css/css_keyframes.css" />
</head>
<body>
<!-- 定义盒子 --->
<div class="shake_box">
<!---摇一摇后 上面图片 盒子--->
<div class="shake_box_top"><span></span></div>
<!---摇一摇后 下面图片 盒子--->
<div class="shake_box_bottom"><span></span></div>
</div>
<!-- 加载jquery, 由于我们这边使用的手机访问微信，调用的微信浏览器,所以:这里使用的是jquery2.x版本-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- 操作 -->
<script type="text/javascript">
/**
* 实现css 后，咱们来写js
* 实现原理:
* HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能
* 但是：
* deviceOrientation包括两个事件：
* 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。
* 2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
*
* "摇一摇"这个动作即“一定时间内设备了一定距离”，因此通过devicemotion监听设备晃动获取到的x, y, z轴的 值在一定时间范围内的变化率，
* 即判断设备是否有进行晃动。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
*
*/
init(); //初始化
//设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了 定义一个摇动的阈值
var shakeThreshold = 3000;
//设置最后更新时间，用于对比
var lastUpdate = 0;
//设置位置速率 curShakeX 重力运动加速 x方向 curShakeY 重力运动加速 y方向 curShakeZ 重力运动速度垂直方向 z
//记录最后一次重力运动加速每个方向的时间 lastShakeX lastShakeY lastShakeY
var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeY=0; //初始化 为0
/////////////////////下面的代码复制即可//////////////////////
//预加摇一摇声音
var shakeAudio = new Audio();
shakeAudio.src = 'resources/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];
}
}
////////////////上面代码复制即可///////////////////
/*函数开始 */
function init(){
//先判断设备是否支持HTML5摇一摇功能 deviceOrientation
if (window.DeviceMotionEvent) {
//获取移动速度，得到device移动时相对之前某个时间的差值比
window.addEventListener('devicemotion', deviceMotionHandler, false);
}else{
alert('您好，你目前所用的设置好像不支持重力感应哦！');
}
}
function deviceMotionHandler(event){
var acceleration =event.accelerationIncludingGravity; //获得重力加速
var curTime = new Date().getTime(); //获得当前时间戳
if ((curTime - lastUpdate)> 100){
var diffTime = curTime -lastUpdate;
lastUpdate = curTime;//记录上一次摇动的时间
/**
* "摇一摇"这个动作即“一定时间内设备了一定距离”，因此通过devicemotion监听设备晃动获取到的x, y, z轴的
* 值在一定时间范围内的变化率，
* 即判断设备是否有进行晃动。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
*/
curShakeX = acceleration.x; ////获取加速度X方向
curShakeY = acceleration.y; ////获取加速度y方向
curShakeZ = acceleration.z; ////获取加速度z方向
var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * 10000;
//计算临界值
if (speed > shakeThreshold) { //这里是设置的临界值
//播放音效
shakeAudio.play();
//######################下面的代码就是摇一摇之后展示的内容
//播放动画
$('.shake_box').addClass('shake_box_focus');
//######################上面的代码就是摇一摇之后展示的内容
clearTimeout(shakeTimeout);
var shakeTimeout = setTimeout(function(){
$('.shake_box').removeClass('shake_box_focus');
},1000)
}
lastShakeX = curShakeX;//记录上一次摇动x 方向加速时间
lastShakeY = curShakeY;//记录上一次摇动y 方向加速时间
lastShakeZ = curShakeZ;//记录上一次摇动y 方向加速时间
}
}
</script>
</body>
</html>
<pre name="code" class="php">css_keyframes.css
@charset "UTF-8";
/* @-webkit- 表示浏览器类型 keyframes 改变css向上 向下 css 样式,通过 @keyframes 规则，您能够创建动画*/
/* @-webkit Safari和Chrome浏览器内核 @-moz 火狐浏览器内核 @-ms 微软浏览器内核 @-o Opera浏览器内核 */
/*向上拉时,动画效果 , 依此 */
@-webkit-keyframes var(--keyframes-topBoxName){/*Safari和Chrome浏览器内核 上面这个盒子*/
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-moz-keyframes var(--keyframes-topBoxName){ /*火狐浏览器内核*/
0% {top: 0;}
50% {top: -200px;}/*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-ms-keyframes var(--keyframes-topBoxName){/*微软浏览器内核*/
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-o-keyframes var(--keyframes-topBoxName){/*Opera浏览器内核*/
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
/****************************************************************************/
/*向下拉时 动画效果*/
@-webkit-keyframes var(--keyframes-bottomBoxName){
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-moz-keyframes var(--keyframes-bottomBoxName){
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-ms-keyframes var(--keyframes-bottomBoxName){
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
@-o-keyframes var(--keyframes-bottomBoxName){
0% {top: 0;}
50% {top: -200px;} /*当是 50% 的时候top 位置发生变化 这个数字是测试出来的*/
100% {top: 0;}
}
