设备方向感应测试(手机倾斜/旋转/陀螺仪/加速度)

设备方向感应测试(手机倾斜/旋转/陀螺仪/加速度),您可以拷贝源码到一个txt,后缀改为html,用手机测试

学习资料,交流所用,互相学习,共同进步:

您可以拷贝源码到一个txt,后缀改为html,用手机测试,很好玩儿的!!!

<!doctype html>

<html>

<head>

    <meta charset="gbk"/>

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-touch-fullscreen" content="yes">  

    <style>

        .test{

            border:2px solid green;

            width:300px;

            height:350px;

            background: #000;

            position: relative;

            COLOR:#FFF;

        }

        .test #ball{

            width:12px;

            height:12px;

            background: #fff;

            -webkit-border-radius:6px;

            position: absolute;

            left:0;

            right: 0;

        }

    </style>

</head>

<body>


<h2>设备方向感应测试</h2>

<div id="msg"></div>


<div id='test' tabindex='0' class="test">

    <!--<img src="img/3.png" id="ball">-->

    <div id="ball"></div>

</div>


<img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo" alt="">

<img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo2" alt="">


<script>

    function Orientation(selector){}

    Orientation.prototype.init = function(){

        window.addEventListener('deviceorientation', this.oriListener, false);

        window.addEventListener('MozOrientation', this.oriListener, false); //为firefox所用

        window.addEventListener('devicemotion', this.oriListener, false);   //重力感应

    }


    Orientation.prototype.oriListener = function(e) {

        setTimeout(function(){

            handler(e);

            deviceMotionHandler(e)

        },10);


        function handler(e){

            // For FF3.6+

            if (!e.gamma && !e.beta) {

                // angle=radian*180.0/PI 在firefox中x和y是弧度值,

                e.gamma = (e.x * (180 / Math.PI)); //转换成角度值,

                e.beta = (e.y * (180 / Math.PI)); //转换成角度值

                e.alpha = (e.z * (180 / Math.PI)); //转换成角度值

            }

            /* beta:  -180..180 (rotation around x axis) */

            /* gamma:  -90..90  (rotation around y axis) */

            /* alpha:    0..360 (rotation around z axis) (-180..180) */


            var gamma = e.gamma

            var beta = e.beta

            var alpha = e.alpha


            if(e.accelerationIncludingGravity){

                // window.removeEventListener('deviceorientation', this.orientationListener, false);

                gamma = e.accelerationIncludingGravity.x*300

                beta = -e.accelerationIncludingGravity.y*300

                alpha = event.accelerationIncludingGravity.z*300

            }


            if (this._lastGamma != gamma || this._lastBeta != beta) {

                document.querySelector("#msg").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0)



                var style = document.querySelector("#ball").style;

                style.left = gamma/90 * 200 + 150 +"px";

                style.top = beta/90 * 200 + 100 +"px";



                this._lastGamma = gamma;

                this._lastBeta = beta;

            }

        }


        function deviceMotionHandler(e) {

            /*

            if(e.accelerationIncludingGravity){

                var gx = e.accelerationIncludingGravity.x;

                var gy = e.accelerationIncludingGravity.y;

                var gz = e.accelerationIncludingGravity.z;

            }

             var facingUp = -1;

             if (gz > 0) {

             facingUp = +1;

             }

             var tiltLR = Math.round(((gx) / 9.81) * -90);

             var tiltFB = Math.round(((gy + 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;

           */


            var gamma = e.gamma

            var beta = e.beta

            var alpha = e.alpha


            var tiltLR =gamma; //Math.round(((beta) / 9) * -90);

            var tiltFB = beta;


            var rotation = "rotate(" + tiltLR + "deg)";

            var rotation2 = "rotate(" + tiltFB + "deg)";

            var style = document.querySelector("#imgLogo").style;

            var style2 = document.querySelector("#imgLogo2").style;

            style.webkitTransform = rotation;

            style2.webkitTransform = rotation2;

        }

    };


    (new Orientation()).init();

</script>

</body>

</html>

  • 发表于 2018-08-17 10:28
  • 阅读 ( 765 )
  • 分类:Flash专区

你可能感兴趣的文章

相关问题

1 条评论

请先 登录 后评论
不写代码的码农
皮卡丘先生

交互动画课件制作

13 篇文章

作家榜 »

  1. 大北兔 15 文章
  2. 皮卡丘先生 13 文章
  3. hero 10 文章
  4. vien007 7 文章
  5. ningbnii 4 文章
  6. Even 4 文章
  7. 炸天 4 文章
  8. anlun214 4 文章