检测初始设备方向值

时间:2015-04-30 15:14:27

标签: javascript mobile device-orientation

我正在尝试手动创建各种视差效果,到目前为止这是我的JavaScript:

var bottom = document.getElementById("bottom");
var top = document.getElementById("top");

window.addEventListener("deviceorientation", function(e) {
  var gamma = e.gamma;
  var beta = e.beta;
  $(bottom).css('left',(gamma/2)+'px').css('top',(beta/2)+'px');
  $(top).css('left',(gamma)+'px').css('top',(beta)+'px');

});

到目前为止,它的工作效果很好,我有我想要的效果,但设备的起始位置并不是我想要的。目前,alpha, beta, and gamma值仅在0,0,0时,如果设备在桌面上是平的。我想要做的是当你加载页面时,该位置被视为0,0,0

例如,如果我正在手中阅读手机,那么我的手机当然已经处于某个角度,并且我希望在页面加载时将此起始位置设为0,0,0

所以把它放到某种伪代码中,这就是我想要实现的目标:

gammaOnLoad and betaOnLoad = initial device orientation

gammaCurrent and betaCurrent = e.gamma and e.beta (from event listener)

gammaDifference and betaDifference = Math.abs(gammaOnLoad - gammaCurrent)

$(elem).css('left', gammaDifference + 'px').css('top', betaDifference + 'px');

所以基本上你在加载页面时接受这些值并将它们用作0,你的原点。这意味着无论您的手机处于何种角度,当您加载页面时,图像将始终看起来正常,并从那里开始视差效果。

1 个答案:

答案 0 :(得分:0)

我想和你做同样的事情。这是非常基本的,但似乎有效:

    $(document).ready(function() {

        var origLR, origFB;

        function setOrigin(eventData) {

            origLR = eventData.gamma;

            origFB = eventData.beta;

        }

        if (window.DeviceOrientationEvent) {

            window.addEventListener('deviceorientation', setOrigin, false);

            setTimeout(function() {

                window.removeEventListener('deviceorientation', setOrigin, false);

                window.addEventListener('deviceorientation', function(eventData) {

                    var tiltLR = eventData.gamma,

                    tiltFB = eventData.beta;

                    tiltLR = (origLR - tiltLR);
                    tiltFB = (origFB - tiltFB);

                    deviceOrientationHandler(tiltLR, tiltFB);

                }, false);
            }, 100);

        };

        function deviceOrientationHandler(tiltLR, tiltFB) {

            $('.bottom').css('transform','translateX(' + (tiltLR/5) + 'px) translateY(' + (tiltFB/5) + 'px)');
            $('.top').css('transform','translateX(' + (tiltLR/2.5) + 'px) translateY(' + (tiltFB/2.5) + 'px)');

        }
    });

我添加了一个100ms的事件监听器来设置初始设备方向值,然后将其删除并将其替换为计算初始和当前之间差异的值。

这可能更有效率,我不是一个特别有经验的程序员。