原理：使用DeviceMotion實(shí)現(xiàn)，關(guān)于DeviceMotion介紹可以查看

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

通過DeviceMotionEvent，可以獲得accelerationIncludingGravity的x,y,z屬性，根據(jù)x,y,z屬性的變化來判斷設(shè)備是否有搖一搖的事件發(fā)生。

accelerationIncludeingGravity說明：

The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don’t have a gyroscope to allow them to properly remove gravity from the data.

代碼如下：

html5使用DeviceMotionEvent實(shí)現(xiàn)搖一搖

.center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }

.normal{background:#000000;}

.normal .txt{color:#FFFFFF;}

.doing{background:#FF0000;}

.doing .txt{color:#FFFF00;}

請(qǐng)執(zhí)行搖一搖

var doing = 0; // 判斷是否在動(dòng)畫顯示中

var speed = 23; // 定義搖動(dòng)的速度數(shù)值

var lastx = 0; var lasty = 0; var lastz = 0; function handleMotionEvent(event) {

var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; if(doing==0){ if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){

doing = 1;

show();

}

}

lastx = x;

lasty = y;

lastz = z;

} function show(){

document.getElementById('mybody').className = 'doing';

document.getElementById('txt').innerHTML = '執(zhí)行了搖一搖';

setTimeout(function(){

doing=0;

document.getElementById('mybody').className='normal';

document.getElementById('txt').innerHTML = '請(qǐng)執(zhí)行搖一搖';

},3000);

}

window.addEventListener("devicemotion", handleMotionEvent, true);

本文介紹了通過html5實(shí)現(xiàn)搖一搖的功能，更多相關(guān)內(nèi)容請(qǐng)關(guān)注php中文網(wǎng)。

相關(guān)推薦：

總結(jié)

以上是生活随笔為你收集整理的grav html5,如何通过html5实现摇一摇的功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。