1. 程式人生 > >css3和js實現重力感應(經測試,andriod4.2支援)

css3和js實現重力感應(經測試,andriod4.2支援)

<img src="http://img1.wgsails.com/yuetaojie/slider/227/193/089/index/輕復古.jpg" id="imgLogo" alt=""> 
<p id="moCalcTiltLR"></p> 

<p id="moCalcTiltFB"></p>

<script> 
function deviceMotionHandler(eventData) { 
    // 
  var acceleration = eventData.accelerationIncludingGravity; 
  
var facingUp = -1; if (acceleration.z > 0) { facingUp = +1; } var tiltLR = Math.round(((acceleration.x) / 9.81) * -90); var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp); document.getElementById("moCalcTiltLR").innerHTML = tiltLR; document.getElementById(
"moCalcTiltFB").innerHTML = tiltFB; var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)"; document.getElementById("imgLogo").style.webkitTransform = rotation; } // if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false
); }else{ alert('親,你的瀏覽器不支援DeviceMotionEvent哦~'); } </script>