您的位置:首页 > Web前端 > CSS

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

2016-04-28 08:41 330 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: