JQuery通過(guò)鍵盤(pán)控制鍵盤(pán)按下與松開(kāi)觸發(fā)事件
效果圖：
HTML部分:
- 首先設(shè)置幾個(gè)盒子，用來(lái)構(gòu)建這個(gè)頁(yè)面的大致框架。
- 給盒子相應(yīng)的類(lèi)名以及id，方便css的布局以及JQuery的獲取。
- 在盒子內(nèi)放入文字。
- 引用JQuery插件。
CSS部分：
1.設(shè)置一個(gè)公共的類(lèi)（HTML），在里面寫(xiě)公共的樣式，并且放入HTML的盒子中。
2.設(shè)置關(guān)鍵幀的值，添加一些CSS3的動(dòng)畫(huà)效果。
3.把引用關(guān)鍵幀的的函數(shù)封裝在一個(gè)類(lèi)（CSS）中。
JQuery部分：
1.先設(shè)置鍵盤(pán)按下事件（onkeydown）。
2.if判斷中輸入相應(yīng)的鍵碼值，確定你所按下的鍵盤(pán)。
3.獲取對(duì)應(yīng)的ID，然后用JQuery代碼給HTML布局添加封裝著關(guān)鍵幀動(dòng)畫(huà)函數(shù)的類(lèi)。
4.設(shè)置鍵盤(pán)松開(kāi)事件（onkeyup）。
5.鍵碼值要與（onkeydown）中對(duì)應(yīng)的鍵碼一致。
5.設(shè)置一次性定時(shí)器，在定時(shí)器的函數(shù)體中寫(xiě)入代碼塊。
6.通過(guò)定時(shí)器，規(guī)定每過(guò)多長(zhǎng)時(shí)間就會(huì)把封裝著關(guān)鍵幀動(dòng)畫(huà)函數(shù)的類(lèi)移除，以實(shí)現(xiàn)可以多次按下鍵盤(pán)的效果。
到此這篇關(guān)于JQuery通過(guò)鍵盤(pán)控制鍵盤(pán)按下與松開(kāi)觸發(fā)事件的文章就介紹到這了,更多相關(guān)JQuery鍵盤(pán)按下與松開(kāi)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
剛開(kāi)始接觸jquery，很多東西不熟悉，對(duì)于表單的一些操作收集整理。2010-04-04
jquery中$.fn和圖片滾動(dòng)效果實(shí)現(xiàn)的必備知識(shí)總結(jié)
圖片滾動(dòng)效果相信大家都使用過(guò)，看上去很簡(jiǎn)單的一個(gè)效果，如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法，下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動(dòng)效果制作的必備知識(shí)，需要的朋友可以參考下。2017-04-04
jackson解析json字符串,首字母大寫(xiě)會(huì)自動(dòng)轉(zhuǎn)為小寫(xiě)的方法
下面小編就為大家分享一篇jackson解析json字符串,首字母大寫(xiě)會(huì)自動(dòng)轉(zhuǎn)為小寫(xiě)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
淺談jQuery.easyui的datebox格式化時(shí)間
這篇文章主要介紹了淺談jQuery.easyui的datebox格式化時(shí)間的方法,需要的朋友可以參考下2015-06-06
bootstrap+spring boot實(shí)現(xiàn)面包屑導(dǎo)航功能(前端代碼)
這篇文章主要介紹了bootstrap+spring boot實(shí)現(xiàn)面包屑導(dǎo)航，在cms建站時(shí)都會(huì)有這種面包屑導(dǎo)航功能，文中給出了前端實(shí)例代碼,需要的朋友可以參考下2019-10-10
javascript 自定義回調(diào)函數(shù)示例代碼
使用函數(shù)做參數(shù)就有下面的好處：當(dāng)你a(b)的時(shí)候函數(shù)b就成了回調(diào)函數(shù)，而你還可以a(c)這個(gè)時(shí)候，函數(shù)c就成了回調(diào)函數(shù)2014-09-09
在jQuery 中只要用行uaMatch()這個(gè)函數(shù)。用到的關(guān)鍵點(diǎn)有:1.regExp.exec(str)；2.navigator.userAgent;2011-02-02
jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條
這篇文章主要介紹了jQuery實(shí)現(xiàn)html可聯(lián)動(dòng)的百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了jQuery中parent()方法用法,實(shí)例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下2015-01-01
一個(gè)CSS+jQuery實(shí)現(xiàn)的放大縮小動(dòng)畫(huà)效果
放大縮小動(dòng)畫(huà)效果實(shí)現(xiàn)的方法有很多，下面有個(gè)不錯(cuò)的示例，使用CSS+jQuery實(shí)現(xiàn)的，感興趣的朋友可以了解下2014-02-02