您好,登錄后才能下訂單哦!
這篇“怎么用JavaScript+H5實(shí)現(xiàn)微信搖一搖功能”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“怎么用JavaScript+H5實(shí)現(xiàn)微信搖一搖功能”文章吧。
第一步,實(shí)現(xiàn)手機(jī)搖動(dòng)改變顏色
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <title>HTML5 手機(jī)搖一搖</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> 手機(jī)搖一搖,改變屏幕顏色。 </body> </html>
主要是手機(jī)的DeviceMotionEvent事件
第二步,微信搖一搖手勢(shì)
相對(duì)于第一步就是增加了搖一搖手勢(shì),改變了搖動(dòng)事件。在搖一搖動(dòng)作之后再添加自己想要的方法即可,無(wú)論是想要進(jìn)入下一個(gè)自己做的頁(yè)面還是觸發(fā)一個(gè)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(); //在此為搖動(dòng)之后的事件,這里為調(diào)用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>正確姿勢(shì):握緊手機(jī),用力搖動(dòng)3秒,苦練18年的麒麟臂終于派上用場(chǎng)了。</td> </tr> </tbody> </table> </body> </html>
有時(shí)候真的可以換一種方法去實(shí)現(xiàn)自己想要的功能。附圖:demo本來(lái)實(shí)現(xiàn)的效果是:
以上就是關(guān)于“怎么用JavaScript+H5實(shí)現(xiàn)微信搖一搖功能”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。