使用HTML5重力感应技术实现手机图片移动

7 min read

您可以使用JavaScript的Device Orientation API来检测移动设备的重力感应，然后使用HTML5和CSS3实现图片的动态移动。

以下是一个简单的例子，演示了如何使用Device Orientation API和CSS3实现图片在移动设备上根据设备倾斜而移动：

<!DOCTYPE html>
<html>
<head>
  <title>移动感应图片</title>
  <style>
    #moving-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>

  <img id="moving-image" src="image.jpg">

  <script>
    function handleOrientation(event) {
      var x = event.gamma; // 取得设备横向倾斜值
      var y = event.beta; // 取得设备纵向倾斜值

      // 根据倾斜值调整图片位置
      var img = document.getElementById("moving-image");
      img.style.left = (50 + (x * 2)) + "%";
      img.style.top = (50 + (y * 2)) + "%";
    }

    if (window.DeviceOrientationEvent) {
      // 监听重力感应事件
      window.addEventListener("deviceorientation", handleOrientation, true);
    } else {
      alert("抱歉，您的设备不支持设备方向API。");
    }
  </script>

</body>
</html>

在这个例子中，我们首先使用CSS3将图像定位在页面的中心。然后，我们为window对象添加了一个事件监听器，监听deviceorientation事件。每次该事件被触发时，我们使用event.gamma和event.beta属性获取设备的横向倾斜和纵向倾斜值，然后使用transform:translate() CSS属性移动图像到新的位置。

请注意，此示例仅适用于支持Device Orientation API的移动设备。因此，在JavaScript中，我们还使用了一个条件检查，以便在设备不支持该API时提供警告消息。