智能手机陀螺仪代码

时间:2016-04-20 00:45:00

标签: android html css iphone gyroscope

我正在使用一些代码来处理基于智能手机陀螺仪值的HTML元素和CSS。我有这个div,我可以变得越来越大,这取决于我如何倾斜我的手机。但是,我不畏缩,我只想让它成长。我有什么想法可以做到这一点?我将保留下面的代码。 我的代码中的“gamma”只是捕获我设备的动作。

    <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>gyro.js - easy access to your web browsers built in accelerometer's and gyroscope's</title>

    <style type="text/css">
        #red {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #example {
            margin-top: 1000px;
        }
    </style>
</head>
<body>
    <p = id="style"></p>
    <p>gyro.getFeatures: <span id="features"></span></p>
    <div id="red">Red</div>
    <span id="example"></span>
    <script src="js/gyro.js"></script>
    <script>
        gyro.startTracking(function(o) {
            var k = document.getElementById('kittens'),
                b = document.getElementById('style'),
                f = document.getElementById('features'),
                dw = o.gamma * 5,
                percent = "%",
                up = false;

            f.innerHTML = gyro.getFeatures();
                                        k.style.width = dw + percent;
                                        b.innerHTML = k.style.width;
    </script>
</body>
</html>

0 个答案:

没有答案