51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
JS代码
当前位置:首页>实用代码>JS代码>

JS结合html5实现陀螺仪效果

时间:2017-08-11 11:41点击:
获取移动设备的陀螺仪,需要知道陀螺仪包含什么。

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

这三个值分别代表:

(1)alpha:

移动设备水平放置时,绕z轴旋转的角度,数值为0度到360度。


2)beta:

移动设备水平放置时,绕X轴旋转的角度,数值为-180度到180度。



(3)gamma:

移动设备水平放置时,绕Z轴旋转的角度,数值为-90度到90度。



案例:


    <!doctype html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport"  
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <meta http-equiv="X-UA-Compatible" content="ie=edge">  
        <title>Document</title>  
    </head>  
    <body>  
    alpha:<span id="alpha"></span><br/>  
    beta:<span id="beta"></span><br/>  
    gamma:<span id="gamma"></span><br/>  
    </body>  
    <script>  
        if (window.DeviceOrientationEvent) {  
            window.addEventListener('deviceorientation', function (event) {  
                var a = document.getElementById('alpha'),  
                    b = document.getElementById('beta'),  
                    g = document.getElementById('gamma'),  
                    alpha = event.alpha,  
                    beta = event.beta,  
                    gamma = event.gamma;  
      
                a.innerHTML = Math.round(alpha);  
                b.innerHTML = Math.round(beta);  
                g.innerHTML = Math.round(gamma);  
      
            }, false);  
        } else {  
            document.querySelector('body').innerHTML = '你的浏览器不支持陀螺仪';  
        }  
    </script>  
    </html>  


效果:


兼容:

兼容具体没有测试,iOS和Android两家的系统有一些区别,而且不同的内核也有一定的偏差。

判断是否是ios可以使用一个webkitCompassHeading属性来判断,ios上面会有这个属性,来表示 手机与地球正北方的夹角。

如果dom里面含有这个属性,我们就需要通过这个属性进行加减来计算出来当前所处于的地区的水平位置。


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开