设备重力感应 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 ...
随机推荐
- Qt编译错误“GL/gl.h:No such file or directory”的解决方法
备注:1)操作系统:Ubuntu-14.04或12.042)Linux用户:root3)Qt版本:qt-linux-opensource-5.2.0-x86 为了迎接Qt的新纪元(从诺基亚移居到芬兰公 ...
- STL--迭代器（iterator）使用详解
迭代器的分类 在STL中,原生指针也是一种迭代器,除了原生指针以外,迭代器被分为五类: Input Iterator 此迭代器不允许修改所指的对象,即是只读的.支持==.!=.++.*.->等操 ...
- 目标检测比赛---Google AI Open Images - Object Detection Track
https://www.kaggle.com/c/google-ai-open-images-object-detection-track#Evaluation Submissions are eva ...
- pandas DataFrame applymap()函数
pandas DataFrame的 applymap() 函数可以对DataFrame里的每个值进行处理,然后返回一个新的DataFrame: import pandas as pd df = pd. ...
- SQL 中的LastIndexOf，截取最后一次出现字符后面的字符(转)
SQL如何取出一个字符串中最后一个特殊字符右边的字符,例如:10*20*300,怎样得到300? 使用reverse配合charindex来实现. reverse是把字符串倒置,然后通过charind ...
- zookeeper 入门(一)
1 下载安装 wget http://mirrors.hust.edu.cn/apache/zookeeper/stable/zookeeper-3.4.6.tar.gzcp zookeeper-3. ...
- Unity和Android混合开发
通用的流程 https://blog.csdn.net/zhangdi2017/article/details/65629589 应用场景 Unity游戏中一些功能需要安卓系统的支持,如搜索wifi等 ...
- supervisor开机自动启动脚本+redis+MySQL+tomcat+nginx进程自动重启配置
[root@mongodb-host supervisord]# cat mongo.conf [program:mongo]command=/usr/local/mongodb/bin/mongod ...
- 【Linux】防火墙与CentOS中的iptables
[iptables] 参考好文:http://www.zsythink.net/archives/1199.这个博客的作者写了深入浅出的iptables介绍,基本上我就是做个他的读书笔记. ■ 基本介 ...
- html 用一个frame刷新另一个frame(同一个Frameset中)
假设主页面index.html,其中frameset结构如下所示: <html> <head> <meta http-equiv="Content-Type&q ...