您的位置：首页 > 移动开发

设备事件（如旋转设备触发的一些事件）

2017-04-12 16:59 162 查看

设备事件

html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>设备事件</title>
</head>
<body>

<div id="box" style="width:200px;height:200px;background-color:red;color:#fff;">hello word</div>
<div id="cont" style="width:200px;height:200px;background-color:blue;color:#fff;">hello word</div>
</body>
</html>

orientationchange

改变了设备的查看模式都会触发

orientationchange

改变的时候可以通过

window.orientation

访问到其变化

window.orientation

有三个值

0 表示为肖像模式，即为竖屏

90 表示为为左旋转的横屏模式，按钮在右方。

-90 表示为右旋转的横屏模式，按钮在左方。

测试代码：

旋转屏幕查看其变化：
window.onload = function (){
var Box = document.getElementById("box");
Box.innerHTML = "current orientation is:" + window.orientation;
window.onorientationchange = function (event){
event = event || window.event
Box.innerHTML = "Current orientation is"+ window.orientation;
}
｝

MozOrientation,deviceorientation

相同：这两个事件都是在加速针检测到设备方向变化时在

window

对象上的触发.

不同点：

MozOrientation

是火狐提供的浏览器事件，

deviceorientation

属于标准事件。所以这里主要讲解

deviceorientation

相关的内容。

deviceorientation

事件的意图主要是告诉开发人员设备的方向朝向哪里，而不是如何移动。设备空间通常通过三维空间定位的即x,y,z轴,x轴表示从左往右，y轴从下到上，z轴从里到外。

deviceorientation的事件对象属性有以下5个:

alpha: 左右旋转，Y轴的度数差(0-360之间的浮点数)

beta: 前后旋转，z轴的度数差（-180 - 180之间）

gamma: 扭转设备，x轴度数差（-90 -90）;

测试代码：

旋转屏幕查看其变化：
window.ondeviceorientation = function (event){
event = event || window.event
Cont.innerHTML = "Alpha="+event.alpha + "<br/>beta="+event.beta + "<br/>gamma="+event.gamma;
Cont.style.webkitTransform = "rotate("+ Math.round(event.alpha)+"deg)";
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 移动端开发

相关文章推荐

新的分享

章节导航