1. 程式人生 > 程式設計 >JQuery通過鍵盤控制鍵盤按下與鬆開觸發事件

JQuery通過鍵盤控制鍵盤按下與鬆開觸發事件

效果圖:

在這裡插入圖片描述

HTML部分:

  1. 首先設定幾個盒子,用來構建這個頁面的大致框架。
  2. 給盒子相應的類名以及id,方便css的佈局以及JQuery的獲取。
  3. 在盒子內放入文字。
  4. 引用JQuery外掛。

在這裡插入圖片描述

CSS部分:

1.設定一個公共的類(HTML),在裡面寫公共的樣式,並且放入HTML的盒子中。
2.設定關鍵幀的值,新增一些CSS3的動畫效果。
3.把引用關鍵幀的的函式封裝在一個類(CSS)中。

在這裡插入圖片描述

JQuery部分:

1.先設定鍵盤按下事件(onkeydown)。
2.if判斷中輸入相應的鍵碼值,確定你所按下的鍵盤。
3.獲取對應的ID,然後用JQuery程式碼給HTML佈局新增封裝著關鍵幀動畫函式的類。

在這裡插入圖片描述

4.設定鍵盤松開事件(onkeyup)。
5.鍵碼值要與(onkeydown)中對應的鍵碼一致。
5.設定一次性定時器,在定時器的函式體中寫入程式碼塊。
6.通過定時器,規定每過多長時間就會把封裝著關鍵幀動畫函式的類移除,以實現可以多次按下鍵盤的效果。

在這裡插入圖片描述

到此這篇關於JQuery通過鍵盤控制鍵盤按下與鬆開觸發事件的文章就介紹到這了,更多相關JQuery鍵盤按下與鬆開事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!