Html5手机微信摇一摇
2016-03-07 16:00
561 查看
<?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;}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信支付以及第三方登陆集成
- iOS开发-- 开发细节（支付宝，微信支付支持库）
- 微信订阅号 45009 报错
- 写博客的时间被看小说、刷微信的时候，要想想
- C# .NET 微信企业号通讯录添加成员
- 夺命雷公狗---微信开发50----获取用户列表接口（2）
- 微信：借用微信内置图片浏览功能
- 微信公众号开发接入指南
- 夺命雷公狗---微信开发49----获取用户列表接口（1）
- iOS微信支付
- 起底微信购物：背靠京东腾讯两棵大树也难乘凉
- 用微信点单 订餐系统打造属于个人的O2O外卖订餐行业商业平台
- 夺命雷公狗---微信开发48----获取用户地理位置接口（3）
- 夺命雷公狗---微信开发47----获取用户地理位置接口（2）
- Java微信公众平台开发（2） 微信服务器post消息体的接收
- 解决了官网微信公众号的报错内容以及供应商交互平台的中英文显示错误问题
- 微信获取用户openid
- 微信商城系统开发需要哪些功能？
- quartz实现微信定时群发
- 微信开发知识学习（一)