JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件
效果圖:
HTML部分:
- 首先設置幾個盒子,用來構建這個頁面的大致框架。
- 給盒子相應的類名以及id,方便css的布局以及JQuery的獲取。
- 在盒子內放入文字。
- 引用JQuery插件。
CSS部分:
1.設置一個公共的類(HTML),在里面寫公共的樣式,并且放入HTML的盒子中。
2.設置關鍵幀的值,添加一些CSS3的動畫效果。
3.把引用關鍵幀的的函數封裝在一個類(CSS)中。
JQuery部分:
1.先設置鍵盤按下事件(onkeydown)。
2.if判斷中輸入相應的鍵碼值,確定你所按下的鍵盤。
3.獲取對應的ID,然后用JQuery代碼給HTML布局添加封裝著關鍵幀動畫函數的類。
4.設置鍵盤松開事件(onkeyup)。
5.鍵碼值要與(onkeydown)中對應的鍵碼一致。
5.設置一次性定時器,在定時器的函數體中寫入代碼塊。
6.通過定時器,規(guī)定每過多長時間就會把封裝著關鍵幀動畫函數的類移除,以實現可以多次按下鍵盤的效果。
到此這篇關于JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件的文章就介紹到這了,更多相關JQuery鍵盤按下與松開事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在Web項目中引入Jquery插件報錯的完美解決方案(圖解)
這篇文章主要介紹了在Web項目中引入Jquery插件報錯的完美解決方案的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09