《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. as3中去掉字符串两边的空格，换行符

     as3 去掉字符串两边的空格,换行符,方法一  ActionScript Code  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20   pub ...

  2. JavaWeb之session

    Session是服务器端技术 利用这个技术,服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资源时,可以把各自 ...

  3. 安全性测试之防范 DDoS 攻击

    安全性测试之防范 DDoS 攻击   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...

  4. linux之shell编程基本语法

    Shell是用户与内核进行交互操作的一种接口,目前最流行的Shell称为bash Shell.Shell也是一门编程语言<解释型的编程语言>,即shell脚本<就是在用linux的s ...

  5. html/css/javascript的含义、作用及理解

    HTML(HyperText Markup Language/超文本标记语言) 含义:HTML是一种用于创建网页的标准标记语言. 作用:页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 理解:主 ...

  6. bit ( 比特 )和 Byte（字节）的关系 以及 网速怎么算

    今天来整理一下存储单位和网速的知识. 最近几天家里网不太好,所以就了解了一下网速和电脑的存储单位的关系. 一.存储单位的bit 和 Byte 1.bit(比特) bit也就是我们不一定听说过的比特,大 ...

  7. WebForm捆绑压缩js和css(WebForm Bundling and Minification)

    .net framework 4以上,可以使用Microsoft.AspNet.Web.Optimization 新建4.0项目 Nuget搜索optimization,安装第一个包 加入Bundle ...

  8. vim工具

    今天和同事讨论使用什么看代码,使用什么写代码的问题.我觉得source insight用来看代码真的还是蛮舒服的,但是他觉得他习惯了VS,用着顺手. 但是我的想法是,有好的工具,得先花点时间去学习使用 ...

  9. Java ssh 框架 hibernate 详细理解

    Hibernate框架技术相信对大多数的 java 程序员并不陌生,数据表之间的关系如何通过Hibernate来建立,需要我们认真的分析数据表中数据项之间的交互: 数据库表的之间的关系有: (1)一对 ...

  10. jquery easyui的datagrid在初始化的时候会请求两次URL？

    我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...