[device-orientation] 使用手机设备的方向感应实现图片选择

   <div class="main">
      <h2>Device Orientation</h2>
      <table>
        <tbody><tr>
          <td>Event Supported</td>
          <td id="doEvent">DeviceOrientation</td>
        </tr>
        <tr>
          <td>Tilt Left/Right [gamma]</td>
          <td id="doTiltLR"></td>
        </tr>
        <tr>
          <td>Tilt Front/Back [beta]</td>
          <td id="doTiltFB"></td>
        </tr>
        <tr>
          <td>Direction [alpha]</td>
          <td id="doDirection"></td>
        </tr>
      </tbody></table>
  </div>
  
  <div class="container" style="-webkit-perspective: 300; perspective: 300;">
    <img src="zhenge.jpg" id="imgLogo" class="logo">
  </div>
  
  <script type="text/javascript">
    init();
    var count = 0;
    
    function init() {
      if (window.DeviceOrientationEvent) {
        document.getElementById("doEvent").innerHTML = "DeviceOrientation";
        // Listen for the deviceorientation event and handle the raw data
        window.addEventListener('deviceorientation', function(eventData) {
          // gamma is the left-to-right tilt in degrees, where right is positive
          var tiltLR = eventData.gamma;
          
          // beta is the front-to-back tilt in degrees, where front is positive
          var tiltFB = eventData.beta;
          
          // alpha is the compass direction the device is facing in degrees
          var dir = eventData.alpha
          
          // call our orientation event handler
          deviceOrientationHandler(tiltLR, tiltFB, dir);
          }, false);
      } else {
        document.getElementById("doEvent").innerHTML = "Not supported on your device or browser.  Sorry."
      }
    }
  
    function deviceOrientationHandler(tiltLR, tiltFB, dir) {
      document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
      document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
      document.getElementById("doDirection").innerHTML = Math.round(dir);
      
      // Apply the transform to the image
      var logo = document.getElementById("imgLogo");
      logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
      logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
      logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
    }
    
    
    // Some other fun rotations to try...
    //var rotation = "rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
    //var rotation = "rotate("+ tiltLR +"deg) rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
  </script>

 

测试手机：

GT - I9300 , 系统版本 3.03 ， 微信下面正常 ， UC V10.8.5.689 可以

iPhone 4s ，ios 版本 7.1.2 , safari浏览器可以， 微信可以