javascript html5搖一搖功能的實(shí)現(xiàn)
通過網(wǎng)上的資料,加上自己的整理,寫了一份html搖一搖功能的簡(jiǎn)介,用做技術(shù)備份。
知識(shí)要點(diǎn)
1、DeviceMotionEvent
這是html5支持的重力感應(yīng)事件,關(guān)于文檔請(qǐng)看:http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介紹:
deviceorientation 提供設(shè)備的物理方向信息,表示為一系列本地坐標(biāo)系的旋角。
devicemotion 提供設(shè)備的加速信息,表示為定義在設(shè)備上的坐標(biāo)系中的卡爾迪坐標(biāo)。其還提供了設(shè)備在坐標(biāo)系中的自轉(zhuǎn)速率。若可行的話,事件應(yīng)該提供設(shè)備重心處的加速信息。
compassneedscalibration 用于通知Web站點(diǎn)使用羅盤信息校準(zhǔn)上述事件。
2、事件簡(jiǎn)介
window.addEventListener("deviceorientation",function(event){// 處理event.alpha、event.beta及event.gamma},true);
{alpha:90, beta:0, gamma:0};
這是 deviceorientation事件返回的參數(shù),為了獲得羅盤指向,可以簡(jiǎn)單的使用360度減去alpha。若設(shè)被平行于水平表面,其羅盤指向?yàn)?360 - alpha)。 若用戶手持設(shè)備,屏幕處于一個(gè)垂直平面且屏幕頂端指向上方。beta的值為90,alpha和gamma無關(guān)。 用戶手持設(shè)備,面向alpha角度,屏幕處于一個(gè)垂直屏幕,屏幕頂端指向右方,則其方向信息如下
{alpha:270- alpha, beta:0, gamma:90};
注冊(cè)一個(gè)devicemotion事件的接收器:
將設(shè)備安置于車輛之上,屏幕處于一個(gè)垂直平面,頂端向上,面向車輛后部。車輛行駛速度為v,向右側(cè)進(jìn)行半徑為r的轉(zhuǎn)彎。設(shè)備記錄acceleration 和accelerationIncludingGravity在位置x處的情況,同時(shí)設(shè)備還會(huì)記錄rotationRate.gamma的負(fù)值:
{acceleration:{x: v^2/r, y:0, z:0}, accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81}, rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};
功能實(shí)現(xiàn)
if(window.DeviceMotionEvent){ window.addEventListener('devicemotion', YaoYiYao,false); } var speed =30;//speed var x = y = z = lastX = lastY = lastZ =0; function YaoYiYao(eventData){ var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){ //簡(jiǎn)單的搖一搖觸發(fā)代碼 alert(1); } lastX = x; lastY = y; lastZ = z; }
首先判斷瀏覽器是否支持該事件。
YaoYiYao用來檢測(cè)是否對(duì)手機(jī)進(jìn)行搖動(dòng)操作,具體就是獲取手機(jī)的的移動(dòng)數(shù)據(jù),將其存在一個(gè)外部變量中,當(dāng)下次又觸發(fā)搖動(dòng)事件時(shí),判斷上次的搖動(dòng)坐標(biāo) 和現(xiàn)在的搖動(dòng)坐標(biāo) 是否處于一個(gè)頻繁調(diào)動(dòng)的范圍:Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 滿足這種條件的話,就是手機(jī)正處于搖動(dòng)狀態(tài),在if語句里面添加進(jìn)你要執(zhí)行的搖一搖代碼即可。
以上就是html5搖一搖功能的實(shí)現(xiàn)思路,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
微信小程序在ios下Echarts圖表不能滑動(dòng)的問題解決
這篇文章主要介紹了微信小程序在ios下Echarts圖表不能滑動(dòng)的解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面我們來一起學(xué)習(xí)下吧2019-07-07Javascript 函數(shù)對(duì)象的多重身份
函數(shù)對(duì)象是javascript 中一個(gè)很特殊的對(duì)象,其特殊體現(xiàn)在他的多重身份上。2009-06-06JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例
這篇文章介紹了JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-11-11JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件
這篇文章主要介紹了JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Layui數(shù)據(jù)表格 前后端json數(shù)據(jù)接收的方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格 前后端json數(shù)據(jù)接收的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能,涉及微信小程序wx.request訪問php后臺(tái)及返回結(jié)果的顯示布局相關(guān)操作技巧,需要的朋友可以參考下2019-05-05基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03