Html5手机微信摇一摇

郎魁
2023-12-01
<?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;}
}


 

 类似资料: