Question

我使用移动设备的加速度计（或桌面的鼠标位置）制作了视差背景效果，但我遇到的主要问题是：

在手机游戏和移动镀铬中，一旦我的iphone达到90度角（如此|），视差背景图像向左或向右跳跃（取决于手机的倾斜度）比应该。

以下是网站：http://reveriesrefined.com/myftp/parBack/

以下是相关代码：

function mobileCall() {
  if (window.DeviceOrientationEvent) {
    $(window).on("deviceorientation", function () {
      var x = event.gamma;
      var y = event.beta;

      //data-smoothing
      if ( y > lastY + 1 || y < lastY - 1 ) {
          parallaxBackMobile(x, y);
      }
      else if ( x > lastX + 1 || x < lastX - 1 ) {
          parallaxBackMobile(x, y);
      }

      lastX = x;
      lastY = y;
    });
  }
}

function parallaxBackMobile(x, y) {
  var numX = x * 2;
  var numY = y * 2;
  var elem = $('#background');

  elem.css({
    left : -numX,
    top : -numY - 100
  });
}

Answer 1

我解决了这个问题：

if ( x > 90 ) {
    x = x - (2 * (x - 90));
}
else if ( x < -90 ) {
    x = x - (2 * (x + 90));
}

从数字到90的距离，乘以2，然后从原始数字中减去。

这意味着0,180变为0,90,0。 0，-180变为0，-90,0。

视差背景的浏览器和移动问题（javascript / jquery）

1 个答案: