[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浏览器可以, 微信可以
posted on 2015-12-16 17:28 smelikecat 阅读(466) 评论(0) 编辑 收藏 举报