手机左右摇晃div左右晃动（重力感应例子）

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    background: Red;
    color: #fff;
    font-size: 20px;
}    
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="m.Tween.js"></script><!--获取设置动画封装的函数-->
<script type="text/javascript">
(function(){
    var box = document.querySelector('#box');
    css(box,"translateX",0);  //设置box元素的translateX为0
    window.addEventListener('devicemotion', function(e) {  //添加重力感应监听事件
        var motion = e.accelerationIncludingGravity;  //重力感应参数
        var x = Math.round(motion.x);  //获取x轴的数值并且四舍五入结果
        var tX = css(box,"translateX");  //获取box元素的translateX的数值
        if(getAdr()){  //判断是否是安卓手机，如果是true就是安卓
            x = -x;  //安卓参数取反
        }
        css(box,"translateX",tX + x);  //box元素translateX的数值等于之前的translateX加x轴倾斜的
    });
})();    
function getAdr(){
    var u = navigator.userAgent;
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
}
</script>
</body>
</html>

 

posted @ 2017-05-03 16:35  念念念不忘  阅读(448)  评论(0)    收藏  举报