您現在的位置是:電腦技術吧?>? 編程技術 ??>??搖一搖html,搖一搖html5??>??正文詳情

搖一搖html,搖一搖html5

吾力強2019-11-16 19:00:40 人圍觀
簡介搖一搖隨機看H5首先,優化devicemotionevent;刪除無用的代碼并按如下方式重新封裝devicemotionevent代碼:if(window)。Devicemotcss3搖一搖晃動

首先對DeviceMotionEvent進行優化; 去除無用的代碼,重新封裝DeviceMotionEven代碼如下:if(window.DeviceMotionEvent) { var speed = 25;//定義一個數值 var x = y = z = lastX = lastY = lastZ = 0;//重置所有數值 window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity;//將傳感值賦給acceleration x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) speed || Math.abs(y-lastY) speed ) { // TODO:在此處可以實現搖一搖之后所要進行的數據邏輯操作 donghua(); } lastX = x; lastY = y; lastZ = z; }, false); } 由于實際項目中有很多需求無法很好的實現, 比如:動畫不執行完畢就不能繼續執行DeviceMotionEvent事件; 所以做了進一步優化;代碼如下:var f=1; function donghua(){ //動畫事件 $(.img).animate({left:'0',opacity:'1'},700,function(){f=1;}); }); if(window.DeviceMotionEvent) { var speed = 25;//定義一個數值 var x = y = z = lastX = lastY = lastZ = 0;//重置所有數值 window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity;//將傳感值賦給acceleration x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) speed || Math.abs(y-lastY) speed ) { // TODO:在此處可以實現搖一搖之后所要進行的數據邏輯操作 if(f==1){ donghua(); f=0; } } lastX = x; lastY = y; lastZ = z; }, false); } 現在就完美了

版權聲明:本文由 吾力強 整理編輯。

原標題:html5實現手機搖一搖,html搖一搖震動

轉載注明出處:http://www.dn9ww09s.icu/program/12920.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • Active directory,active

    Active directory,active 相關圖片打印機出現active當前不可用的活動目錄域服務通常在用戶使用打印機時發生。這種情況通常是由打印機服務中的設置引起的。只要你進入服務設置,大部分都可以解決。具體操作方法a...

  • 火螢桌面下載,螢火桌面

    火螢桌面下載,螢火桌面 相關圖片螢火視頻動態桌面很多用戶都喜歡使用火鷹視頻桌面來設置自己的動態壁紙,但有時會遇到火鷹視頻桌面無法使用或火鷹視頻桌面無法正常播放的情況,用戶可以嘗試重置壁紙品牌介紹...

  • 水波紋效果,如何做出水波紋的效果

    水波紋效果,如何做出水波紋的效果 相關圖片短發水波紋今天,我們將繼續分享JavaScript實現的效果示例,本文將介紹如何使用JavaScript來實現水波紋的效果。水波效應以圖片為背景。單擊圖片中的任何位置都將水波紋和大波浪的區別...

  • 小丸工具箱怎么樣,小丸工具箱怎么用

    小丸工具箱怎么樣,小丸工具箱怎么用 相關圖片小丸工具箱慢小藥丸工具箱是一種功能強大、使用方便的視頻壓縮工具,它可以最大程度地保持視頻質量,并能很好地壓縮視頻量,受到許多用戶的青睞。一些用戶仍然不了解小藥丸工...

  • 八萬落地suv哪款好,落地8萬左右的suv哪款好

    八萬落地suv哪款好,落地8萬左右的suv哪款好 相關圖片哪款手機測量工具好用HTML5現在已經成為最流行的標記語言,擁有成熟的社區和廣泛的瀏覽器支持。功能齊全,擴展性強,設計開發人員可以賺錢。更可控的元素,更自由的交互設計,變...

  • htc u12怎么樣,htcu12

    htc u12怎么樣,htcu12 相關圖片htcu12 社區HTC U12是HTC即將發布的旗艦車型。其上一代HTC U11在外觀上是一款非常成功的手機。全新的設計風格和出色的手機體驗挽救了宏達旗艦的聲譽。更有趣的是,索htc u12最新消息...

  • 分分快三玩法技巧集錦,拍照方法技巧集錦

    分分快三玩法技巧集錦,拍照方法技巧集錦 相關圖片拍照的方法與技巧集錦什么是CSS黑客?不同瀏覽器對CSS的解析結果不同,導致同一CSS輸出的頁面效果不同,這就需要csshack來解決瀏覽器的本地兼容性問題。為不同瀏覽器編寫不同C玩快...

  • word設置頁碼,word怎么設置頁碼

    word設置頁碼,word怎么設置頁碼 相關圖片從當前頁開始設置頁碼編輯word文檔時,我們需要在當前文檔中添加一些說明或封面。添加頁碼時,不能將這些頁設置為從頁碼開始的頁。如何從任何頁面設置單詞頁碼?雙擊開始word20...

  • 水墨詩意,水墨詩意的名字

    水墨詩意,水墨詩意的名字 相關圖片水墨古風意境畫北京奧運會開幕式上的詩情畫意的畫卷和它呈現給我們的美麗畫卷,至今仍記憶猶新。今天,我們將用flash制作一個水墨卷軸展開的詩意動畫,主要使用矩形工具和漸變填...

  • 余額寶額度不足什么意思,余額寶贖回額度是什么意思

    余額寶額度不足什么意思,余額寶贖回額度是什么意思 相關圖片余額寶余額額度不足支付寶現在是首選的支付方式之一,轉移到支付寶的錢會自動變成余額寶,不僅可以用于日常消費,還可以用來賺錢,利息比銀行還高。但也有部分用戶發現自己的...

熱評文章

  • 三星s9指紋失靈,三星s10指紋不靈敏

    三星s9指紋失靈,三星s10指紋不靈敏 相關圖片三星手機怎么截屏隨著vivo x20plus屏幕指紋版的推出,可以說它為全屏幕手機注入了新鮮血液。不過,作為第一批智能手機,三星不會甘心衰落。近日,國外媒體披露,三星已經在研發三...

  • 蔣大鴻地理實例,地理立向秘訣

    蔣大鴻地理實例,地理立向秘訣 相關圖片牽一發而動全身的地理實例HTML5得到的坐標代碼如下:代碼如下:!DOCTYPE HTML htmlhead titletest1。HTML/Title metahttp equiv=地理大全...

  • 網易云鎖屏歌詞,網易云怎么只有鎖屏歌詞

    網易云鎖屏歌詞,網易云怎么只有鎖屏歌詞 相關圖片網易云音樂鎖屏歌詞ios網易云音樂是一款功能豐富的軟件。我相信很多小朋友會用它來練習唱歌。如何打開網易云音樂的鎖屏歌詞?如何關閉網易云音樂的鎖屏?現在,超人軟件將為您...

  • 初學者如何學化妝,計算機初學者入門教程

    初學者如何學化妝,計算機初學者入門教程 相關圖片初學者輪滑視頻教程一般來說,大多數應用程序通過保持HTML的簡單性來解決大多數瀏覽器問題,或者換句話說,通過基于最低的通用特性進行編寫。然而,即便如此,仍然存在字體和布...

  • 怎么加steam好友,steam加不上好友怎么辦

    怎么加steam好友,steam加不上好友怎么辦 相關圖片steam加好友錯誤隨著國外優質的游戲新作不斷涌現,越來越多的國內玩家開始在steam平臺上下載、暢玩游戲。而且你還可以在游戲中和steam上的好友一起進行游戲。很多用戶還不知道怎s...

  • 激萌聊天,激萌為什么不能聊天了

    激萌聊天,激萌為什么不能聊天了 相關圖片激萌不能視頻聊天了嗎不同于一般的美容軟件,用戶可以聊天。那吉夢怎么開始聊天呢?吉夢如何開始視頻聊天?現在,超人軟件編輯將為您介紹它,希望您喜歡!吉夢怎么開始聊天?...

  • css3類似加載,常見加載中css3

    css3類似加載,常見加載中css3 相關圖片css3有哪些優化HTML代碼:代碼如下:UL class=main menuliclass=main menu item activeahref=(home/A/Lili clcss3動畫頁面加載...

  • 我的steam進不去市場,steam市場為什么進不去

    我的steam進不去市場,steam市場為什么進不去 相關圖片steam進不去隨著絕地生存之火,它的分布平臺蒸汽也為更多玩家所知。Steam平臺是全球最大的綜合數字發行平臺之一,曾榮獲第33屆最佳游戲平臺金搖滾獎。但有些球員想進入狀態steam老是...

  • 跳轉菜單,自定義菜單跳轉網頁

    跳轉菜單,自定義菜單跳轉網頁 相關圖片訂閱號菜單跳轉到網頁一。Dreamweaver跳轉菜單行為1。選擇文檔2中的跳轉菜單對象。打開行為面板3。單擊“添加行為”( )按鈕,然后在彈出式下拉菜單中選擇“跳轉菜單”命令。如公...

  • 悅跑圈只能加入一個跑團,怎么加入附近的跑團

    悅跑圈只能加入一個跑團,怎么加入附近的跑團 相關圖片悅跑圈跑團團長權限悅跑圈,作為一種運動神器,相信很多小朋友都喜歡用它,加入跑團,和同浩一起跑。如何加入跑步小組?現在,超人軟件將為您制作一個教程,讓您享受悅潤泉的...

關注微信

变脸官网查询