设备重力感应 window.DeviceOrientationEvent
设备屏幕方向与运动 https://developers.google.cn/web/fundamentals/native-hardware/device-orientation/
MDN deviceorientation文档 https://developer.mozilla.org/zh-CN/docs/Web/Events/deviceorientation
设备动作和方向事件可访问移动设备上的内置加速度计、陀螺仪和罗盘
Alpha 围绕 Z 轴的旋转
Beta 围绕 X 轴的旋转
Gamma 围绕 Y 轴的旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ff4081">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/manifest.json">
<title>Ajanuw</title>
<style>
#img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transition: transform 1;
width: 120px;
height: 120px;
background-image: url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=);
background-image: image-set(
url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
);
background-image: -webkit-image-set(
url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
);
}
</style>
</head>
<body>
<div id="doeSupported"></div>
<div id="doc"></div>
<div id="img"></div>
<script type="text/javascript">
let w = window.innerWidth;
let h = window.innerHeight;
let ww = w / 170;
let hh = h / 90;
function set2(num){
if(num){
return num.toFixed(2);
}
return null;
}
function deviceOrientationHandler(e) {
console.log( e);
var doc = `
Z 轴的旋转 => ${set2(e.alpha)};<br/>
X 轴的旋转 => ${set2(e.beta)};<br/>
Y 轴的旋转 => ${set2(e.gamma)};<br/>
`;
document.getElementById("doc").innerHTML = doc;
update(e.beta, e.gamma, e.alpha);
}
function update(x,y,z){
document.getElementById("img")
.style.transform = `translate(${(y*ww)-60}px, ${(x*hh)-60}px) rotate(${z - 90}deg)`;
}
if (window.DeviceOrientationEvent) { // 设备方向
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById("doeSupported").innerText = "Supported!";
}
function deviceMotionHandler(e) {
console.log( e.acceleration);// 加速度
}
if(window.DeviceMotionEvent){ // 设备动作
window.addEventListener('devicemotion', deviceMotionHandler);
}
</script>
</body>
</html>
设备重力感应 window.DeviceOrientationEvent的更多相关文章
- iOS设备的重力感应
重力感应是每台iOS设备都具备的功能,所以在应用用好重力感应会有意想不到的效果 1.添加CoreMotion框架 2.在需要使用重力感应的类中添加头文件 #import <CoreMotion/ ...
- coocs2d-html5在使用cocoseditor时调用设备的accelerometer来使用重力感应
在使用大牛touchsnow开发的插件cocoseditor开发游戏时遇到了一些问题,然后就试着解决.近期想试下coocs2d-html5是否能使用重力感应,发现是能够的.只是这个仅仅能在移动真机上測 ...
- H5案例分享：html5重力感应事件
html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
- 移动终端学习2：触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- 移动端html5重力感应
下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/ http://06wjin.sinaapp.com/billd/test. ...
- html5重力感应事件之DeviceMotionEvent
前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...
- h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)
这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...
- iOS 重力感应 学习1 陀螺仪 水平仪 指南针
小球可以随着重力感应 四处乱撞. 放大了坐标位移 就可以看见小球动了. 然后规定小球的路径 当滑到中间时候 弹出一张图片 作为提示. 我做了一个小demo 效果不错哦 CMMotionManager ...
随机推荐
- stm32型号解读
ST意法半导体在牵手ARM后可以说是做的非常成功,抓住了从普通MCU到ARM的市场转变的机会.由于ST公司的STM32系列ARM 使用了完善的库开发,作为芯片的应用者不用从底层的寄存器来实现每个功 ...
- haproxy负载均衡的安装配置
haproxy是一款可靠,高性能的并且可以支持TCP/HTTP的负载均衡器,和前面说过的nginx负载均衡类似,这里haproxy对于负载均衡来说更专业,支持的配置选项更多,稳定性也很强,甚至只需要一 ...
- ln: creating symbolic link XXXXXX : Operation not supported
ln: creating symbolic link XXXXXX : Operation not supported 转自:https://blog.csdn.net/z444_579/articl ...
- windows SVN 服务器搭建
一.SVN服务器搭建和使用 1. 首先来下载和搭建SVN服务器,下载地址如下: http://subversion.apache.org/packages.html#windows,进入网址 ...
- flex bison
https://www.gnu.org/software/bison/manual/bison.html https://blog.csdn.net/sirouni2003/article/detai ...
- Linux使用过程中常见问题及其解决方法
“我不怕问题的出现,相反,我喜欢问题,因为我知道这是一种成长............” 1,ubuntu中文输入法的安装: 今天重装了英文版的ubuntu,而发现中文输入法并没有自动安装好,于是搜了 ...
- apacheh2.4和php5.5集成环境遇到的问题
装了wampserver64位,里面的php是5.5,apache是2.4 1.配置虚拟主机时碰到问题:apache AH01630: client denied by server configur ...
- redis 连接 docker容器 6379端口失败
redis部署在docker容器中Could not connect to Redis 容器内redis-cli是可以直接连上的,但是在另一台服务器上就不能用外网ip来连了 虽然我创建redis容器时 ...
- 图灵数学·统计学丛书.PDF(53本全）
图灵数学·统计学丛书01-概率论及其应用(第1卷·第3版)-[美]William.Feller-人民邮电出版社.pdf 图灵数学·统计学丛书01-金融数学:衍生产品定价引论-[英]M·巴克斯特& ...
- Asp.Net EF查看生成sql（MiniProfiler）
查看ef生成的sql有很多种方法,这里介绍两种几种的方法 方法1:浏览器直接方法/Home/getsql直接查看sql //方法1:浏览器直接方法/Home/getsql直接查看sql public ...