项目终于如约上线, 但是在春节前又有一个新的活动要做, 类似微信的摇一摇活动. 也一直在做微信公众号的东西, 但是要调用微信摇一摇的接口还是有些困难, 因为只提供了摇一摇周边, 附近的人以及一系列的红包页面, 相对于我们的需求只需要摇一摇这个动作却是大相径庭.
其实 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 本来实现的效果是:
改版之后
来源: http://www.jb51.net/article/140659.htm