HTML5使用DeviceOrientation實(shí)現(xiàn)搖一搖功能
HTML5有一個(gè)重要特性:DeviceOrientation,它將底層的方向和運(yùn)動(dòng)傳感器進(jìn)行了高級(jí)封裝,它使我們能夠很容易的實(shí)現(xiàn)重力感應(yīng)、指南針等有趣的功能。本文將結(jié)合實(shí)例給大家介紹使用HTML5的重力運(yùn)動(dòng)和方向傳感器實(shí)現(xiàn)手機(jī)搖一搖效果。
DeviceOrientation包括兩個(gè)事件:
1、deviceOrientation:封裝了方向傳感器數(shù)據(jù)的事件,可以獲取手機(jī)靜止?fàn)顟B(tài)下的方向數(shù)據(jù),例如手機(jī)所處角度、方位、朝向等。
2、deviceMotion:封裝了運(yùn)動(dòng)傳感器數(shù)據(jù)的事件,可以獲取手機(jī)運(yùn)動(dòng)狀態(tài)下的運(yùn)動(dòng)加速度等數(shù)據(jù)。
HTML
頁(yè)面上有一個(gè)div#hand,用來放置一個(gè)手搖的圖片,div#result用來展示搖動(dòng)后的結(jié)果信息。
<div id="hand" class="hand hand-animate"></div> <div id="result"></div>
我們可以使用CSS3來增強(qiáng)頁(yè)面效果,使用-webkit-animation動(dòng)畫效果實(shí)現(xiàn)手搖圖片的動(dòng)態(tài)效果,具體請(qǐng)下載源代碼查看。
Javascript
“搖一搖”這個(gè)動(dòng)作即“一定時(shí)間內(nèi)設(shè)備了一定距離”,因此通過devicemotion監(jiān)聽設(shè)備晃動(dòng)獲取到的x, y, z軸的 值在一定時(shí)間范圍內(nèi)的變化率,即判斷設(shè)備是否有進(jìn)行晃動(dòng)。而為了防止正常移動(dòng)的誤判,需要給該變化率設(shè)置一個(gè)合適的臨界值。
HTML5判斷設(shè)備晃動(dòng)的代碼我們使用已經(jīng)封裝好的shake.js,項(xiàng)目地址:https://github.com/alexgibson/shake.js。
<script src="shake.js"></script>
首先實(shí)例化Shake,然后啟動(dòng)開始監(jiān)聽設(shè)備運(yùn)動(dòng)情況,監(jiān)聽設(shè)備運(yùn)動(dòng),回調(diào)監(jiān)聽結(jié)果:shakeEventDidOccur。
window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function shakeEventDidOccur () { var result = document.getElementById("result"); result.className = "result"; var arr = ['妹子一枚','福利圖片一套','碼農(nóng)筆記一本','土豪金一臺(tái)']; var num = Math.floor(Math.random()*4); result.innerHTML = "恭喜,搖得"+arr[num]+"!"; setTimeout(function(){ result.className = "result result-show"; }, 1000); } };
這里,函數(shù)shakeEventDidOccur()可以自定義,本例是將搖晃后的結(jié)果返回在頁(yè)面上展示出來,請(qǐng)看DEMO演示。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Android利用傳感器實(shí)現(xiàn)微信搖一搖功能
- Android 微信搖一搖功能實(shí)現(xiàn)詳細(xì)介紹
- IOS 實(shí)現(xiàn)搖一搖的操作
- iOS實(shí)現(xiàn)微信朋友圈與搖一搖功能
- javascript html5搖一搖功能的實(shí)現(xiàn)
- 分享網(wǎng)頁(yè)檢測(cè)搖一搖實(shí)例代碼
- 使用PHP實(shí)現(xiàn)微信搖一搖周邊紅包
- php官方微信接口大全(微信支付、微信紅包、微信搖一搖、微信小店)
- 安卓系統(tǒng)中實(shí)現(xiàn)搖一搖畫面振動(dòng)效果的方法
- Android實(shí)現(xiàn)搖一搖功能
相關(guān)文章
jQuery實(shí)現(xiàn)輸入框下拉列表樹插件特效代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框下拉列表樹特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08Jquery實(shí)現(xiàn)頁(yè)面加載時(shí)彈出對(duì)話框代碼
將以下代碼置于head標(biāo)簽中即可實(shí)現(xiàn)加載時(shí)彈出對(duì)話框的效果,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡(jiǎn)單說明
這篇文章主要介紹了jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡(jiǎn)單說明,使用jQuery的事件會(huì)使代碼更加簡(jiǎn)單,同時(shí)對(duì)各瀏覽器的兼容性也還不錯(cuò),需要的朋友可以參考下2016-05-05jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(二)
ajax聯(lián)動(dòng)框想必大家早有所耳聞,接下來將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動(dòng)框,右邊的聯(lián)動(dòng)框用jquery生成,仿照上篇的js方法修改的,感興趣的你可以參考下希望可以幫助到你2013-03-03html、css和jquery相結(jié)合實(shí)現(xiàn)簡(jiǎn)單的進(jìn)度條效果實(shí)例代碼
這篇文章主要介紹了html、css和jquery相結(jié)合實(shí)現(xiàn)簡(jiǎn)單的進(jìn)度條效果的實(shí)例代碼,這個(gè)進(jìn)度條特別簡(jiǎn)單,首先html里面的話就是一個(gè)div里面嵌套一個(gè)div,然后寫好想要的樣式就行了,具有一定的參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-10-10jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
本文給大家分享一段超簡(jiǎn)單的代碼基于jquery實(shí)現(xiàn)倒計(jì)時(shí)功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-02-02如何將 jQuery 從你的 Bootstrap 項(xiàng)目中移除(取而代之使用Vue.js)
Bootstrap是網(wǎng)上最流行的前端開發(fā)框架。下面通過本文給大家分享將 jQuery 從你的 Bootstrap 項(xiàng)目中移除的方法,需要的的朋友參考下吧2017-07-07