《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>

新鲜小玩意儿- deviceOrientation移动设备旋转事件的更多相关文章

  1. 【原】UI随设备旋转从iOS6到iOS8的适配策略

    - (void)statusBarOrientationChange:(NSNotification *)notification { WClassAndFunctionName; UIInterfa ...

  2. 【转】IOS设备旋转的内部处理流程以及一些【优化建议】

    加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向: typedef NS_ENUM(NSInteger, UIDeviceOrienta ...

  3. html屏幕旋转事件监听

    近期做微信服务号开发,在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示. 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋.右旋还是没旋). 摘自:http://bbs.phonegap10 ...

  4. 设备旋转，创建水平模式布局--Android studio

    1.在项目工具窗口中,右键单击res目录后选择new--Android resource directory菜单项. 2.从资源类型Resource type列表中选择layout,保持Source ...

  5. android Activity生命周期（设备旋转、数据恢复等）与启动模式

    1.Activity生命周期     接下来将介绍 Android Activity(四大组件之一) 的生命周期, 包含运行.暂停和停止三种状态,onCreate.onStart.onResume.o ...

  6. HTML5-javascript屏幕旋转事件：onorientationchange

    屏幕旋转事件:onorientationchange 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋.右旋还是没旋) 判断屏幕是否旋转 function orientationChange() { ...

  7. 小案例带你揭秘JS事件

    小案例带你揭秘JS事件 ### 什么是事件? 在js中一个事件的组成由那些呢? 谁触发事件:事件源 触发什么事件: 事件的类型 触发事件干什么事:事件处理函数 事件传播的过程 捕获阶段 就是从wind ...

  8. iOS AVCaptureSession 小视频开发总结，支持设备旋转

    iOS开发中当我们想要自定义相机拍照或摄像界面时,UIImagePickerController无法满足我们的需求,这时候我们可以使用AVFoundation.framework这个framework ...

  9. XCODE shouldAutorotateToInterfaceOrientation 对于不同版本 设备旋转不同方向时 视图的相应旋转方向的实现

    对于版本号不同的设备,旋转时视图的要做出相应的旋转,那么版本不同,代码的实现是如何的,如何对旋转方向做出限制?下面是小编的个人看法! //版本号为3.5 -5.0 -(BOOL)shouldAutor ...

随机推荐

  1. 树莓派Raspberry中成功安装RobotFramework+Selenium

    [原创链接]:http://www.cnblogs.com/atsats/p/6666848.html 一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在 ...

  2. 手机自动化培训：Appium介绍

    手机自动化培训:Appium介绍 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  3. Android 接入 OpenCV库的三种方式

           OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它轻量级而且高效——由一系列 C 函数和少 ...

  4. Android开发 旋转屏幕导致Activity重建解决方法(转)

     文章来源:http://www.jb51.net/article/31833.htm Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“ ...

  5. ruby错误

    ActiveRecord::StatementInvalid in WelcomeController#index ActiveRecord::StatementInvalid in WelcomeC ...

  6. 使用 Http 的 Get 方式读取网络数据

    作为移动平台的应用,一定避免不了与网络交换数据,不论是读取网页数据,还是调用API接口,都必须掌握Http通信技术 代码如下: package zw1; import java.io.Buffered ...

  7. Jquery一些实用函数

    1.jQuery.parseJSON( json )第一个参数json的类型是字符串: var obj = jQuery.parseJSON( '{ "name": "J ...

  8. Mac下安装BeautifulSoup

    1.输入命令su,输入root密码,进入root用户 2.执行命令安装pip: sudo easy_install pip 详细pip介绍:http://blog.csdn.net/olanlanxi ...

  9. struts1实现简单的登录功能（附源码）

    环境:MyEclipse 14                                                                                     ...

  10. jdk动态代理与cglib代理、spring aop代理实现原理解析

    原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...