项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。
其实H5+JavaScript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果。
第一步，实现手机摇动改变颜色
<!doctype html>
<html>
<head>
<meta charset=\"utf-8\" />
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"/>
<title>HTML5 手机摇一摇</title>
<script type=\"text/javascript\">
var color = new Array(\'#fff\', \'#ff0\', \'#f00\', \'#000\', \'#00f\', \'#0ff\');
if(window.DeviceMotionEvent) {
var speed = 25;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener(\'devicemotion\', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
}, false);
}
</script>
</head>
<body>
手机摇一摇，改变屏幕颜色。
</body>
</html>
主要是手机的DeviceMotionEvent事件
第二步，微信摇一摇手势
相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。
<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\" %>
<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>摇一摇</title>
<link rel=\"stylesheet\" href=\"plug-in/liuliangbao/shake/css/shake.css\" rel=\"external nofollow\" >
<link rel=\"stylesheet\" href=\"plug-in/liuliangbao/shake/css/myDialog.css\" rel=\"external nofollow\" >
<script type=\"text/javascript\" src=\"plug-in/liuliangbao/shake/js/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"plug-in/liuliangbao/shake/js/howler.min.js\"></script>
<script type=\"text/javascript\" src=\"plug-in/liuliangbao/shake/js/fastclick.js\"></script>
<script type=\"text/javascript\" src=\"plug-in/liuliangbao/shake/js/myDialog.js\"></script>
<script type=\"text/javascript\">
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();
//在此为摇动之后的事件，这里为调用ControllergoShakeResult方法
window.location.href = \"shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}\";
});
});
$(\"#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();
});
</script>
</head>
<body>
<table id=\"container\">
<tbody>
<tr>
<td class=\"container\" colspan=\"2\">
<div id=\"shake\">
<img src=\"plug-in/liuliangbao/shake/images/inner.png\" class=\"inner\">
<img src=\"plug-in/liuliangbao/shake/images/shake.png\" class=\"shake_up\" id=\"shakeup\">
<img src=\"plug-in/liuliangbao/shake/images/shake.png\" class=\"shake_down\" id=\"shakedown\">
</div><div id=\"loading\" class=\"loading\"></div>
</td>
</tr>
<tr>
<td>
您今天还可以摇<input id=\"shakeCount\" name=\"shakeCount\" value=\"${leftcount}\">次
</td>
</tr>
<tr>
<td>正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。</td>
</tr>
</tbody>
</table>
</body>
</html>
有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:
改版之后
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容