JS检测设备方向

前段时间看到一个效果比较有意思，特此记录一下

这个地方主要是利用了设备自带的方向检测功能,随着设备的角度不同，给图标加上一点滚动效果

处理方向的事件

  window.addEventListener('deviceorientation',function(e){
            var alpha = e.aplha;
            var beta = e.beta;
            var gamma = e.gamma;
            console.log('alpha:'+alpha+',beta:'+beta+',gamma:'+gamma);  
        });

借用一张图来解释下alpha，beta,gamma的关系

理解了概念之后，就可以开始使用这个值做点事了。但是这里有一个问题就是，我们并不能用单一的值去做计算，并且方向通常还和手机的放置位置有关，并且在Android上陀螺仪的数据不是很稳定，需要加一些方法做缓冲。
还好有一个组件已经处理好了上面的那些问题，并且还单独提供了两个计算出来的值，分别是lon,lat,字面意思是经度和纬度，可以当成平移的距离

下面用一个小例子来展示一下：
演示 源码

var clientWidth = document.documentElement.clientWidth;
        var left = (600 - clientWidth)/2;
        $('div').css('left','-' + left +'px');
// 这里主要是让图片居中，为了效果好一点，选择双倍图然后进行缩放
        var ori = new Orienter();
        ori.onOrient = function(obj){
            var a,b;

            a = obj.lon < 180 ? obj.lon : obj.lon - 360; //计算出来的lon是0~360 转换为180~-180
            b = obj.lat;

            a = a > 0 ? a > left ? left : a : a < '-' + left ? '-' + left : a;
            b = b > 0 ? b > 20 ? 20 : b : b < -20 ? -20 : b;
            // 控制移动范围

            $('.demo').css("-webkit-transform","translate3d("+ a +"px,"+b+"px,0)");
        }

        ori.init();

参考

MDN
JavaScript 陀螺仪检测设备方向(重力感应)
orienter