新鲜小玩意儿- deviceOrientation移动设备旋转事件

《javascript高级程序设计》第三版

其中事件的章节 提到一个有意思的事件

 

 

deviceOrientation 也就是 设备(device) - orientation(方向)

 

贴代码（需要在移动端的webkit浏览器运行 - 用chrome模拟也是口以的   下面有说明如何模拟）

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="eventFN.js"></script>
    <script>

        window.onload = function(){

            var oTxt = document.getElementById("output");
            var oDiv = document.getElementById("div1");
            window.addEventListener("deviceorientation",function(event){

            oTxt.innerHTML =  "Alpha="+event.alpha + "<br>beta = " + event.beta + "<br>Gamma = " + event.gamma;
            oDiv.style.webkitTransform ='rotatex('+event.beta+'deg) rotatey('+event.gamma+'deg) rotatez('+event.alpha+'deg)';

            },false);


        }

    </script>
</head>
<body>
<div id="div1" style="background:red; width:100px; height:100px;"></div>
<div  id="output"></div>
</body>
</html>

 

 

 

posted @ 2015-04-09 10:03  四两websir  阅读(855)  评论(0)  编辑  收藏  举报