HTML5 ----- deviceorientation API

  当我们把设备举到面前,就是坐公交车时玩手机的状态,手机的宽度(水平方向)就是X轴,从左向右依次变大;手机的高度(垂直方向)就是y轴,从下到上依次变大; 眼光盯着屏幕,我们的视线就是Z轴,离我们的眼睛越远,Z值越小。

  将设备靠近自己的眼睛意味着将其沿Z轴正方向移动,而将设备远离自己的眼睛意味着沿Z轴负方向移动;朝向自己的脚的地方移动,降低设备的位置意味着沿Y轴的负方向移动,向上移动设备到头部则沿Y轴正方向移动;将设备移动自己的右方意味着将其沿X轴正方向移动,反之,则沿X轴负方向移动。

  要想探测到设备的移动,就要在window对象上监听deviceorientation事件。只要设备移动,就会触发该事件,并返回一个包含旋转角度的对象,这个对象有三个属性:alpha,beta, gamma.

  alpha 是绕z轴旋转的角度, 就像我们转动雨伞一样,手柄放到我们的胸前,伞头朝向外面,然后进行旋转。我们用手捏住手机,垂直放于胸前,然后以拇指为中心点,旋转一圈就是z轴旋转,所以只有alpha发生变化,就是用户在旋转手机。

  beta 则是绕x轴旋转的角度,说明用户在前后摇晃手机

  gamma, 则是绕x轴旋转的角度,说明用户在左右摇晃手机

window.addEventListener(‘deviceorientation‘, function(data) {
    console.log(data.alpha,data.beta, data.gamma)
})
时间: 2024-08-07 08:58:10

HTML5 ----- deviceorientation API的相关文章

Html5 Selectors API

新QuerySelector方法 querySelector():根据指定的选择规则,返回在页面中找到的第一匹配元素 querySelectorAll():根据指定规则返回页面中所有相匹配的元素 实例: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; char

HTML5 Geolocation API精确性[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出

HTML5 History API

以Html5 History API为关键词搜索,会得到很多结果,我仅根据自己的使用整理. 1.两个API pushState和replaceState. pushState向浏览器历史记录里增加一个状态,供浏览器后退前进时使用,用法 history.pushState(data, '页面标题', url); replaceState就是替换某个状态,参数和pushState一样. 2.一个事件 onpopstate. 用户点击了前进或者后退就会触发,而不是使用pushState或者replac

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

那些牛掰的 HTML5的API

那些牛掰的 HTML5的API(二) 1:视频播放器 2:地理定位 我们的支持html5 的浏览器给我们提供一个接口(api),可以用来获取你当前的位置. 主要是通过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度.. 1 if (navigator.geolocation){ 2 navigator.geolocation.getCurrentPosition(showPosition); 3 } else{ 4 x.innerHTML="Geolocation is n

HTML5 File API初探 支持文件拖放上传功能

新一代Web开发标准HTML 5可以带来远远超出其本身作为一种标记语言的能力,除我们之前介绍的HTML 5可完美支持视频音频元素外,还提供一些强大的脚本工具,负责监督HTML5发展进程的W3C组织,刚刚出版了一份有关文档操作API的规格草案,HTML5 File API 接口功能. 该HTML5 File API的设计初衷,是改善基于浏览器的Web应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 ﹤input type=”file”﹥ 来处理文件上传. 更为惊喜的是

HTML5 file api读取文件的MD5码工具

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆兼容: 3.缺陷:当上传大文件时,需要较长的时间才能扫描出MD5码: 4.关于引用:其中引用了js文件(spark-md5.js) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

HTML5 File API — 拖拽显示

1.HTML5拖拽 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 如果是html中的元素,要进行拖动,需要设置draggable为true. 下面的代码显示了img在两个div里任意拖动. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1, #div2 6 {float:left; width:100px; height:35px;

[HTML5_Web Workers+Sockets]HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

前言 HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API, 跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递. 使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术. 跨文档消息传输 在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信. 首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听: window.addevntListene