设备重力感应 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 ...
随机推荐
- 《es6标准入门》chapter11中关于Proxy的一个错误例子的纠正
在原书第二版的p120,这里有一个使用Proxy实现管道化调用的例子,想法很好,但是代码有问题,下面是更正之后的代码. 由于我是在node环境下运行,所以我把几个全局函数定义到global内了,如果是 ...
- Neo4j(一)
01-windows下载与安装neo4j https://blog.csdn.net/qq_21383435/article/details/78807024 neo4j的配置文件(图文详解) htt ...
- NatApp开启HTTPS访问方式
一.首先需要到付费隧道中选择免费开启https 二.其次需要重新启动natapp服务,如下图出现两个隧道说明OK
- [Canvas]空战游戏进阶 增加发射子弹 敌机中弹爆炸功能
点此下载源码. 图例: 源码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv=" ...
- build.gradle最佳实践之buildConfigField
使用AndroidStudio进行开发,其中很重要的一个文件就是build.gradle,他是整个项目的控制中心,这里收集一些日常会用到的语法或者使用技巧,以备后用.这篇博客主要说明 buildTyp ...
- python eric6 IDE
之前开发一直使用sublime text + anaconda, 无意中发现了eric, Python主流IDE对比:Eric VS. PyCharm 使用IDE绝对是能提高开发效率的... http ...
- netstat使用--10个常用的命令
1.列出所有的端口 netstat -a 列出TCP协议的端口 netstat -at UDP协议的端口 netstat -au 2.列出处于监听状态的socket netstat - ...
- MFC总结之CListCtrl用法及技巧
复制于:http://www.cnblogs.com/lidabo/archive/2012/08/23/2652796.html 1.基本操作 分别从下面四点来介绍CListCtrl的基本操作: ① ...
- [Aaronyang] 写给自己的WPF4.5 笔记13[二维自定义控件技巧-可视化状态实战，自定义容器，注册类命令，用户控件补充]
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 博文摘要:欢迎大家来支持我的<2013-2015 Aar ...
- 将R非时间序列的data.frame转变为时序格式
将R非时间序列的data.frame转变为时序格式,常常会用到,尤其是股票数据处理中, 举例:dailyData包括两列数据:Date Close10/11/2013 871.9910/10/2013 ...