HTML5 重力感應試玩

2021-07-05 08:50:21 字數 823 閱讀 3661

html5 中針對高階手機提供了重力感應和重力加速的介面,開發可以利用這個介面獲取到移動裝置重力加速感應資料。

目前已經支援的瀏覽器只有chrome和firefox,以及ios的webkit(貌似android上因為版本差異很大,部分低版本的系統不支援)。

通過iphone或者mac電腦訪問下面的位址可以體驗哈

使用也比較簡單:

首先,繫結感應事件

window.addeventlistener('deviceorientation', this.orientationlistener, false); //方向感應器  

window.addeventlistener('mozorientation', this.orientationlistener, false); //方向感應器 for firefox

window.addeventlistener('devicemotion', this.orientationlistener, false); //重力加速感應器 for iphone, android

使用上需要區分裝置是否支援重力加速器,部分裝置無重力加速,只能獲取到方向

方向中分alpha

,beta

,gamma

三個,其實對應我們常說的 y, z, x 三個方向, 方向可以通過 event

來直接獲取到,獲取到到的資料單位是 度數

, 不過firefox稍微有點偏離規範,返回的是 弧度

單位。

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

html5標籤屬性大全 HTML5

音訊格式 屬性 值描述 屬性 值描述 屬性值描述 屬性值描述 gz bjsh 屬性值 描述 required required 表單擁有該屬性表示其內容不能為空,必填 placeholder 提示文字 表單的提示資訊,存在預設值將不顯示 autofocus autofocus 自動聚焦屬性,頁面載入...

瘋狂html5講義(一) HTML5簡介

1.在html發展歷史中,最廣為人知的是html3.2和html4.01.2.將html與xml的長處加以結合,從而得到xhtml,xhtml是更嚴格 更純淨的html 3.w3c組織使用dtd document type definition,文件型別定義 來定義html和xhtml的語義約束,包...