Html 5のDeviceOrientation特性を使用して揺れ機能を実現
2013 ワード
今では多くの携帯サイトにも微信のような揺れ機能があります.例えば、お年玉を受け取ったり、贈り物を受け取ったりします.
1,deviceOrientation:方向センサデータをカプセル化したイベントは,携帯電話が置かれている角度,方位,向きなど,携帯電話の静的状態における方向データを取得できる.
2,deviceMotion:モーションセンサデータイベントをカプセル化し,携帯電話のモーション状態におけるモーション加速度データを取得できる
多くのことを言うと、コードは健康です.
直接貼って使えますが、音楽リンクは自分で用意してくださいね
1,deviceOrientation:方向センサデータをカプセル化したイベントは,携帯電話が置かれている角度,方位,向きなど,携帯電話の静的状態における方向データを取得できる.
2,deviceMotion:モーションセンサデータイベントをカプセル化し,携帯電話のモーション状態におけるモーション加速度データを取得できる
多くのことを言うと、コードは健康です.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title> </title>
<script type="text/javascript">
window.onload=function(){init();}
var SHAKE_THRESHOLD=3000;//
var last_update=0;//
var x=y=z=last_x=last_y=last_z=0;// x、y、z
function init(){
//
if(window.DeviceMotionEvent){
//
window.addEventListener('devicemotion',deviceMotionHandler,false);
}else{
alert('not support mobile event');
}
}
//
function deviceMotionHandler(eventData){
//
var acceleration=eventData.accelerationIncludingGravity;
var curTime=new Date().getTime();//
var diffTime=curTime-last_update;
if(diffTime>100){
last_update=curTime;//
x=acceleration.x;// X
y=acceleration.y;// Y
z=acceleration.z;//
var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;//
if(speed>SHAKE_THRESHOLD){
alert(" ， ");
var media=document.getElementById("musicBox");//
media.setAttribute("src","http://192.168.1.125/mohe/upload/audio/20140930/20140930114522_485.mp3");
media.load();//
media.play();//
}
//
last_x=x;
last_y=y;
last_z=z;
}
}
</script>
</head>
<body>
<p> </p>
<audio id="musicBox" controls="true" src=""/>
</body>
</html>直接貼って使えますが、音楽リンクは自分で用意してくださいね