ios - 视差:获取网页中的视差事件

将iPhone投放到iPhone时，如何在网页上的javascript中接收视差事件？我签出了github.com的404页面，它使用加速度计响应运动。只需尝试转到github.com/f7fu3f73fh39f8h3f93fh398h(或任何组成的页面)，然后查看它们正在执行的炫酷视差动画即可。

我查看了源代码，但看不到他们为获取事件所做的任何特殊操作。

最佳答案

我认为他们只是在使用Plax

从ploji example page看来，加速度计的内容是由该插件处理的。

它们仅在该页面中包括jquery和plax

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/plax.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
    $('#plax-logo').plaxify({"xRange":20,"yRange":20})
    $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
    $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
    $.plax.enable()
  })
</script>

然后在plax.js中lines 209-243

// Determine if the device has an accelerometer
//
// returns true if the browser has window.DeviceMotionEvent (mobile)
function moveable(){
  return (ignoreMoveable===true) ? false : window.DeviceOrientationEvent !== undefined;
}

// The values pulled from the gyroscope of a motion device.
//
// Returns an object literal with x and y as options.
function valuesFromMotion(e) {
  x = e.gamma;
  y = e.beta;

  // Swap x and y in Landscape orientation
  if (Math.abs(window.orientation) === 90) {
    var a = x;
    x = y;
    y = a;
  }

  // Invert x and y in upsidedown orientations
  if (window.orientation < 0) {
    x = -x;
    y = -y;
  }

  motionStartX = (motionStartX === null) ? x : motionStartX;
  motionStartY = (motionStartY === null) ? y : motionStartY;

  return {
    x: x - motionStartX,
    y: y - motionStartY
  };
}

关于ios - 视差:获取网页中的视差事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23958909/