css3和js实现重力感应(经测试,andriod4.2支持)

来源:互联网 发布:淘宝怎么给差评 编辑:程序博客网 时间:2024/06/08 15:12
<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>

0 0
原创粉丝点击