设备重力感应 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 ...
随机推荐
- 解决微信小程序ios端滚动卡顿的问题
方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...
- java- WatchService监控
java7中新增WatchService可以监控文件的变动信息(监控到文件是修改,新增.删除等事件:) 其中注册事件是需要的: StandardWatchEventKinds.ENTRY_MODIFY ...
- IOPS计算
Device Type IOPS 7,200 rpm SATA drives HDD ~75-100 IOPS[2] 10,000 rpm SATA drives HDD ~125-150 IOPS[ ...
- Python根据多个空格Split字符串
下面的String: 1 沪1 上海市 1850 1350 400 1300 1186/1644(嘉定约100,松江69 奉贤68 2007年上海常住人口1858万人,户籍人口1378.86万人,来沪 ...
- Spark机器学习(10)：ALS交替最小二乘算法
1. Alternating Least Square ALS(Alternating Least Square),交替最小二乘法.在机器学习中,特指使用最小二乘法的一种协同推荐算法.如下图所示,u表 ...
- 2017 33 款iOS开源库
IGListKit https://github.com/Instagram/IGListKit 由 Instagram 开发人员制作,IGListKit 是用于构建快速灵活列表的数据驱动型的 UIC ...
- [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 1
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 欢迎大家支持我的力作<[Aaronyang] 写给自己的 ...
- connect by prior start with 语句实现树递归查询[百度经验]
TART WITH CONNECT BY PRIOR子句实现递归查询 TART WITH CONNECT BY PRIOR这个语法主要用于查询数据包中的树型结构关系.先看下原始数据时怎么样的吧! 表中 ...
- SNF开发平台WinForm-Grid表格控件大全
我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件: 1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...
- 菜鸟要做架构师（二）——java性能优化之for循环
完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...