檢測初始設備方向值

Question

我正在嘗試手動創建各種視差效果，到目前為止，這是我的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如果設備在桌子上放平，則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）。 這意味着無論您的手機處於什么角度，當您加載頁面時，圖像將始終看起來正常，並從那里開始視差效果。

Answer 1

我想和你做同樣的事情。 這是非常基本的，但似乎可行：

    $(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的事件偵聽器，用於設置初始設備方向值，然后將其刪除，並用一個可以計算初始值和當前值之間的差值的事件偵聽器代替。

這可能會更有效率，我不是一個特別有經驗的程序員。