這篇文章將為大家詳細(xì)講解有關(guān)基于HTML5陀螺儀如何實現(xiàn)實現(xiàn)ofo首頁眼睛移動效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)自2013年起，先為西吉等服務(wù)建站，西吉等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為西吉企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

ofo眼睛效果

效果分析

從效果中不難看出，是使用陀螺儀事件實現(xiàn)的。

這里先來看一下HTML5中陀螺儀事件的一些概念。

陀螺儀事件為deviceorientation，這里主要獲取事件中的alpha,beta,gamma。

aplha

行動裝置水平放置時，繞 Z 軸旋轉(zhuǎn)的角度，數(shù)值為 0 度到 360 度。

beta

行動裝置水平放置時，繞 X 軸旋轉(zhuǎn)的角度，數(shù)值為 -180 度到 180 度。

gamma

行動裝置水平放置時，繞 Z 軸旋轉(zhuǎn)的角度，數(shù)值為 -90 度到 90 度。

這里，只需要用到beta和gamma。

將apk解壓，得到眼睛素材：

代碼實現(xiàn)