《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. 微信小程序评分功能

    很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3. ...

  2. 五分钟秒懂Java日志组件

    Java中有许多种日志记录方式,有些API有占位符,有些API没占位符,初学的人可能会搞不清楚这些日志组件的由来.我一开始的时候也是很懵逼的,后来一点点弄懂了于是就又了这篇文章. 在Java中进行日志 ...

  3. 【Android】基于TCP协议的网络通信

    1.使用ServerSocket 创建TCP服务器端: ServerSocket server; try { server = new ServerSocket(8000); while (true) ...

  4. 【 Android】自定义的AlertDialog中的EditText无法调用输入法问题解决

    1.问题描述: 在自定义的AlertDialog 中添加了EditText组件,但运行时怎么点EditText都无法调出软键盘: 2.原因分析: 一开始我以为EditText的focus属性没有设置好 ...

  5. Linux的链接文件-ln命令

    Linux的链接文件 使用ln命令来创建链接文件(link) Linux链接分两种:硬链接(Hard Link),符号链接(Symbolic Link) 默认情况下,ln命令产生硬链接. [root@ ...

  6. dubbo个人总结

    dubbo,分布式服务框架,RPC服务框架. 注册中心zk,redis......,使用大多为zk 注册流程 最后一图 服务提供者启动时向/dubbo/com.foo.BarService/provi ...

  7. Cookie中文乱码问题

    页面一登录,页面二保存用户信息,放入Cookies里. 但是Cookies放入中文会引起编码问题,如报错“Control character in cookie value, consider BAS ...

  8. tcp并发服务端

    TCP并发服务器:并发服务器的思想是每一个客户端的请求并不由服务器的主进程直接处理,而是服务器主进程创建一个子进程来处理. 创建TCP并发服务器的算法如下: socket(……): //创建一个TCP ...

  9. mybatis新手入门常见问题集（持续更新）

    一.参数为集合 Q:parameterType指的的类型是集合类型还是对象? A:都可以,甚至不用在xml中指定也可以.第一,mybatis会对传入的参数进行判断是不是list或者array,第二,m ...

  10. Java数据类型及运算

    (一),Java基本类型及运算 注释:可以用于生成API: 命令如:javadoc -d apidoc windowtitle hhh -doctitle aaa  -header bbbb -ver ...