《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. 2.Java集合总结系列：List接口及其实现

    在介绍List接口之前,我们先来看看 Collection 接口,因为Collection接口是 List / Set / Queue 接口的父接口,List / Set / Queue 的实现类中很 ...

  2. CentOS下安装node

    下载 wget https://nodejs.org/dist/v7.7.4/node-v7.7.4-linux-x64.tar.gz 解压 tar -zxvf node-v7.7.4-linux-x ...

  3. [编织消息框架][JAVA核心技术]动态代理应用5-javassist

    基础部份: 修改class我们用到javassist,在pom.xml添加 <properties> <javassist.version>3.18.2-GA</java ...

  4. 在app中屏蔽第三方键盘

    iOS8开放了安装第三方键盘的权限,但是在项目开发中,有些情况是需要禁用第三方键盘的.比如说,数字键盘上需要自定义按钮,但是在第三方键盘弹出时,按钮就覆盖在这上面了,在这中情况下,最好的办法是禁用第三 ...

  5. VC++6.0中不兼容问题

    记得上次用VC++6.0已经是很长一段时间之前的事情了.这次由于需要学习计算机图形学,要开始学这写一些算法之类的,我又开始了VC++之旅. 重新安装一个vc++,我用的是Visual C++ 6.0( ...

  6. 脚本语言：Xmas（一）

    很偶然的一个想法,在从北京回成都的高铁上:我想要一个计算器.于是在火车上花了十来个小时,完成了一个模型:能够处理+-*/的优先级,以及"()",比如:1+(3+2)*4.这已是一年 ...

  7. oracle实现like多关键字查询

    oracle实现like多关键字查询: select * from contract_info tt where 1=1 and REGEXP_LIKE(tt.contract_name,'关键字1| ...

  8. Apriori算法(C#)

    AprioriMethod.cs using System; using System.Collections.Generic; using System.Linq; using System.Web ...

  9. Android -- 贝塞尔实现水波纹动画（划重点！！）

    1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...

  10. cookie方法封装及cookie缺点分析

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Consolas; color: #4f5d66 } p.p2 { margin: 0.0px ...