设备重力感应 window.DeviceOrientationEvent

设备屏幕方向与运动 https://developers.google.cn/web/fundamentals/native-hardware/device-orientation/

MDN deviceorientation文档 https://developer.mozilla.org/zh-CN/docs/Web/Events/deviceorientation

设备动作和方向事件可访问移动设备上的内置加速度计、陀螺仪和罗盘

Alpha 围绕 Z 轴的旋转
Beta 围绕 X 轴的旋转
Gamma 围绕 Y 轴的旋转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Chrome, Firefox OS and Opera -->
  <meta name="theme-color" content="#ff4081">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="manifest" href="/manifest.json">
  <title>Ajanuw</title>
  <style>
    #img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      transition: transform 1;
      width: 120px;
      height: 120px;
      background-image: url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=);
      background-image: image-set(
        url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
        url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
      );
      background-image: -webkit-image-set(
        url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
        url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
      );
    }
  </style>
</head>

<body>
  <div id="doeSupported"></div>
  <div id="doc"></div>
  <div id="img"></div>
  <script type="text/javascript">
  let w =  window.innerWidth;
  let h =  window.innerHeight;

  let ww = w / 170;
  let hh = h / 90;
    function set2(num){
      if(num){
        return num.toFixed(2);
      }
      return null;
    }
    function deviceOrientationHandler(e) {
      console.log( e);
      var doc = `
       Z 轴的旋转 => ${set2(e.alpha)};<br/>
       X 轴的旋转 => ${set2(e.beta)};<br/>
       Y 轴的旋转 => ${set2(e.gamma)};<br/>
      `;
      document.getElementById("doc").innerHTML = doc;
      update(e.beta, e.gamma, e.alpha);
    }
    function update(x,y,z){
      document.getElementById("img")
      .style.transform = `translate(${(y*ww)-60}px, ${(x*hh)-60}px) rotate(${z - 90}deg)`;
    }

    if (window.DeviceOrientationEvent) { // 设备方向
      window.addEventListener('deviceorientation', deviceOrientationHandler, false);
      document.getElementById("doeSupported").innerText = "Supported!";
    }

    function deviceMotionHandler(e) {
      console.log( e.acceleration);// 加速度
    }

    if(window.DeviceMotionEvent){ // 设备动作
      window.addEventListener('devicemotion', deviceMotionHandler);
    }
  </script>
</body>

</html>
posted @ 2018-01-31 13:53  Ajanuw  阅读(499)  评论(0)  编辑  收藏  举报