html5手机微信摇一摇特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5手机微信摇一摇特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>html5手机微信摇一摇特效</title>
<link rel="stylesheet" href="./css/shake.css">
<link rel="stylesheet" href="./css/myDialog.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/howler.min.js"></script> 
<script type="text/javascript" src="./js/fastclick.js"></script> 
<script type="text/javascript" src="./js/shake.js"></script>
<script type="text/javascript" src="./js/myDialog.js"></script>
</head>
<body>

<table id="container">
<tbody>
	<tr>
		<td class="container" colspan="2">
			<div id="shake">
				<img src="./images/inner.png" class="inner">
				<img src="./images/shake.png" class="shake_up" id="shakeup">
				<img src="./images/shake.png" class="shake_down" id="shakedown">
			</div>
			<div id="loading" class="loading"></div>
		</td>
	</tr>
	<tr id="controlbar">
		<td class="controlbar" onclick="javascript:shake();">
			<img src="./images/sdy.png" width="40" height="53"><br>手动摇
		</td>
	</tr>
	<tr id="cantshake" style="display:none"><td class="controlbar" colspan="2">对不起，您的手机无法支持摇一摇！</td></tr>
</tbody>
</table>
</body>
</html>

JS代码(shake.js):

//摇一摇部分 var SHAKE_THRESHOLD = 1000;
	var last_update = 0;
	var last_time = 0;
	var x;
	var y;
	var z;
	var last_x;
	var last_y;
	var last_z;
	var sound = new Howl({
	urls:['/shake/sound/shake_sound.mp3']}
).load();
	var findsound = new Howl({
	urls:['/shake/sound/shake_match.mp3']}
).load();
	var curTime;
	var isShakeble = true;
	function init(){
	if (window.DeviceMotionEvent){
	window.addEventListener('devicemotion',deviceMotionHandler,false);
}
else{
	$("#cantshake").show();
}
}
function deviceMotionHandler(eventData){
	curTime = new Date().getTime();
	var diffTime = curTime - last_update;
	if (diffTime > 100){
	var acceleration = eventData.accelerationIncludingGravity;
	last_update = curTime;
	x = acceleration.x;
	y = acceleration.y;
	z = acceleration.z;
	var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
	if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble){
	shake();
}
last_x = x;
	last_y = y;
	last_z = z;
}
}
function shake(){
	last_time = curTime;
	$("#loading").attr('class','loading loading-show');
	$("#shakeup").animate({
	top:"10%"}
,700,function (){
	$("#shakeup").animate({
	top:"25%"}
,700,function (){
	$("#loading").attr('class','loading');
	findsound.play();
	myDialog.alert('恭喜你，中奖了');
}
);
}
);
	$("#shakedown").animate({
	top:"40%"}
,700,function (){
	$("#shakedown").animate({
	top:"25%"}
,700,function (){
}
);
}
);
	sound.play();
}
//各种初始化 $(document).ready(function (){
	Howler.iOSAutoEnable = false;
	FastClick.attach(document.body);
	init();
}
);

CSS代码(shake.css):

html,body,table{margin:0;width:100%;height:100%;background-color:#444444;}
a{text-decoration:none;}
table{text-align:center;}
.container{height:80%;}
.shake_up{width:150px;height:150px;margin:auto;position:absolute;clip:rect(0,150px,75px,0);top:25%;left:0;right:0;}
.shake_down{width:150px;height:150px;margin:auto;position:absolute;clip:rect(75px,150px,150px,0);top:25%;left:0;right:0;}
.loading{position:absolute;top:60%;left:50%;margin-left:-50px;width:100px;height:100px;background:url(../images/spinner.png) no-repeat;background-size:100px 100px;opacity:0;-webkit-animation:loading infinite linear .5s;-moz-animation:loading infinite linear .5s;-ms-animation:loading infinite linear .5s;-o-animation:loading infinite linear .5s;animation:loading infinite linear .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;}
@-webkit-keyframes loading{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
.loading-show{opacity:1;}
.inner{width:80px;height:150px;margin:auto;position:absolute;top:25%;left:0;right:0;}
.controlbar{height:75px;width:40px;font:15px '微软雅黑';color:#E3E3E3;}

附件:下载该文件资源,减少时间成本(增值服务)