css3和js实现重力感应


<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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM