Html 5のDeviceOrientation特性を使用して揺れ機能を実現

2013 ワード

今では多くの携帯サイトにも微信のような揺れ機能があります.例えば、お年玉を受け取ったり、贈り物を受け取ったりします.
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>

直接貼って使えますが、音楽リンクは自分で用意してくださいね