JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件
效果圖:
HTML部分:
- 首先設(shè)置幾個(gè)盒子,用來構(gòu)建這個(gè)頁(yè)面的大致框架。
- 給盒子相應(yīng)的類名以及id,方便css的布局以及JQuery的獲取。
- 在盒子內(nèi)放入文字。
- 引用JQuery插件。
CSS部分:
1.設(shè)置一個(gè)公共的類(HTML),在里面寫公共的樣式,并且放入HTML的盒子中。
2.設(shè)置關(guān)鍵幀的值,添加一些CSS3的動(dòng)畫效果。
3.把引用關(guān)鍵幀的的函數(shù)封裝在一個(gè)類(CSS)中。
JQuery部分:
1.先設(shè)置鍵盤按下事件(onkeydown)。
2.if判斷中輸入相應(yīng)的鍵碼值,確定你所按下的鍵盤。
3.獲取對(duì)應(yīng)的ID,然后用JQuery代碼給HTML布局添加封裝著關(guān)鍵幀動(dòng)畫函數(shù)的類。
4.設(shè)置鍵盤松開事件(onkeyup)。
5.鍵碼值要與(onkeydown)中對(duì)應(yīng)的鍵碼一致。
5.設(shè)置一次性定時(shí)器,在定時(shí)器的函數(shù)體中寫入代碼塊。
6.通過定時(shí)器,規(guī)定每過多長(zhǎng)時(shí)間就會(huì)把封裝著關(guān)鍵幀動(dòng)畫函數(shù)的類移除,以實(shí)現(xiàn)可以多次按下鍵盤的效果。
到此這篇關(guān)于JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件的文章就介紹到這了,更多相關(guān)JQuery鍵盤按下與松開事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Web項(xiàng)目中引入Jquery插件報(bào)錯(cuò)的完美解決方案(圖解)
這篇文章主要介紹了在Web項(xiàng)目中引入Jquery插件報(bào)錯(cuò)的完美解決方案的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09jQuery 1.2.x 升級(jí) 1.3.x 注意事項(xiàng)
2009-05-05jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
這里給大家分享的是一段自己編寫的使用jQuery實(shí)現(xiàn)拽調(diào)整Div層大小的代碼,非常實(shí)用,推薦給有需要的小伙伴們。2015-01-01jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法,實(shí)例分析了jQuery實(shí)現(xiàn)form表單延時(shí)提交的技巧,需要的朋友可以參考下2015-03-03jQuery判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部的實(shí)現(xiàn)方法
最近做項(xiàng)目遇到這樣的需求,要求基于jq判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部了,下面小編給大家分享實(shí)例代碼,需要的朋友參考下吧2017-10-10