本文為大家分享了JS實現(xiàn)微信搖一搖的原理，供大家參考，具體內容如下
實現(xiàn)原理：
1.微信搖一搖事件需要有硬件支撐，必須要求手機中有陀螺儀
2.在JS中給window添加ondevectionmotion事件。該事件在手機晃動，即手機中的陀螺儀發(fā)生旋轉，該事件會觸發(fā)
3.觸發(fā)ondevectionmotion事件，會產生一個事件對象，通過該對象中的鍵值(accelerationIncludingGravity)來獲得該重力加速器對象
4.重力加速器對象中含有陀螺儀的坐標，通過重力加速器對象.x - .y - .z 獲取陀螺儀當前的坐標
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>微信搖一搖</title> </head> <body> <!--請搖一搖--> </body> <script type="text/javascript"> function randomNum(m,n){ return Math.floor(Math.random(n - m + 1) + m); } //cover設置背景尺寸 //將背景圖按所在標簽的寬高，縮放 document.body.style.backgroundSize = "cover"; //設置body的背景圖 document.body.style.backgroundImage = "url(img/bg.jpg)" ; //事件設備：觸發(fā)該事件需要硬件支持 //搖一搖功能： //1.手機中的陀螺儀加速兩次 加速器的差值當達到某個值時，則認為是手機晃動事件 //2.設置手機晃動事件前，獲取加速器的值 //3.添加手機晃動事件; //獲取手機晃動前加速器的值,創(chuàng)建一個對象獲取 var currentValue = { x : 0, y : 0, z : 0 }; //獲取手機晃動之后加速器的值,創(chuàng)建一個對象獲取 var lastValue = { x : 0, y : 0, z : 0 } //設置晃動的最小的距離，只有達到該距離時，才執(zhí)行搖一搖事件 var minValue = 20; //當手機觸發(fā)搖一搖事件時，我們得到此時的位置信息，存儲到一個p標簽上 //理論上講：陀螺儀事件中的加速器是無法靜止的; var p1 = document.createElement("p"); //第一種方式： var img1 = document.createElement("img"); img1.style.width = "375px"; img1.style.height = "560px"; //手機晃動事件 window.ondevicemotion = function(e){ //獲取對象 var event1 = event || e; //獲取加速器對象，為了獲取陀螺儀上的坐標信息 var acceleration = event1.accelerationIncludingGravity; //記錄當前加速器的值 currentValue.x = acceleration.x; currentValue.y = acceleration.y; currentValue.z = acceleration.z; //判斷微信搖一搖事件（手機是否晃動） if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) > minValue || Math.abs(currentValue.z - lastValue.z) > minValue) { //說明搖一搖事件觸發(fā) //實現(xiàn)微信搖一搖，可以將搖一搖中的圖片，作為body的背景圖 //隨機一張圖片的下標（1 - 5） var ranN = randomNum(1,6); //創(chuàng)一個定時器 var timer = setInterval(function(){ ranN ++ if (ranN == 6) { ranN = 1; } //為當前的body設置背景圖 //document.body.style.backgroundImage = "url(img/"+ranN+".jpg)"; //為當前img設置路徑 img1.src = "img/"+ranN+".jpg"; },200); //設置一個延時器，延時一段時間后消除延時器 setTimeout(function(){ clearInterval(timer); },1000); } //記錄最后的值（保存上一次晃動事件中的加速器的值） lastValue.x = currentValue.x; lastValue.y = currentValue.y; lastValue.z = currentValue.z; } document.body.appendChild(img1); </script> </html> 注意：該代碼中沒有上傳圖片，如需要運行需要自己在代碼的同級目錄創(chuàng)建一個img文件夾，里面放上從1到6的后綴為.jpg的圖片
新聞熱點
疑難解答
