Dieses Mal zeige ich Ihnen, wie Sie JS+H5 zur Implementierung von WeChat Shake verwenden sehen. . Das Projekt wurde schließlich wie geplant gestartet, aber vor dem Frühlingsfest steht noch eine neue Aktivität an, ähnlich der Shake-Aktion von WeChat. Wir haben auch an öffentlichen WeChat-Konten gearbeitet, aber es ist immer noch etwas schwierig, die WeChat Shake-Schnittstelle aufzurufen, da sie im Vergleich zu unseren Anforderungen nur Shake-Peripheriegeräte, Personen in der Nähe und eine Reihe roter Umschlagseiten bereitstellt schütteln Der Effekt des Schüttelns ist völlig anders.
Tatsächlich kann die von H5+
JavaScriptgeschriebene Seite den Schütteleffekt erzielen, indem die Bildschirmlänge und -breite des Mobiltelefons ermittelt und Ton hinzugefügt wird.
Der erste Schritt besteht darin, das Telefon zu schütteln, um die Farbe zu ändern<!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>
, WeChat-Shake-GesteIm Vergleich zum ersten Schritt wird die Shake-Geste hinzugefügt und das Shake-Ereignis geändert. Fügen Sie einfach nach der Schüttelaktion die gewünschte Methode hinzu, unabhängig davon, ob Sie die nächste von Ihnen erstellte Seite aufrufen oder ein Controller-Ereignis auslösen möchten.
<%@ 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"> <p 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"> </p><p id="loading" class="loading"></p> </td> </tr> <tr> <td> 您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次 </td> </tr> <tr> <td>正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。</td> </tr> </tbody> </table> </body> </html>
Manchmal kann man wirklich eine andere Methode verwenden, um die gewünschte Funktion zu erreichen. Angehängtes Bild: Der Originaleffekt der Demo ist:
Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Ausführliche Erläuterung der Verarbeitungsschritte für Vue-TastenmodifikatorereignisseJS+CSS3 zur Verstärkung der Bildbindungs-Mausbewegungsereignisverstärkung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS+H5 zur Implementierung von WeChat Shake. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!