zoukankan      html  css  js  c++  java
  • [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浏览器可以, 微信可以

  • 相关阅读:
    Android 2.2 r1 API 中文文档系列(11) —— RadioButton
    Android API 中文 (15) —— GridView
    Android 中文 API (16) —— AnalogClock
    Android2.2 API 中文文档系列(7) —— ImageButton
    Android2.2 API 中文文档系列(6) —— ImageView
    Android 2.2 r1 API 中文文档系列(12) —— Button
    Android2.2 API 中文文档系列(8) —— QuickContactBadge
    [Android1.5]TextView跑马灯效果
    [Android1.5]ActivityManager: [1] Killed am start n
    Android API 中文(14) —— ViewStub
  • 原文地址:https://www.cnblogs.com/shuman/p/5051777.html
Copyright © 2011-2022 走看看