基于Jquery實現(xiàn)鍵盤按鍵監(jiān)聽
從NETTUTS看到的文章,效果很不錯,有點類似于Flash做出來的效果,demo在這里 ,原文 對實現(xiàn)步驟講得很清楚,我就不多提了,實現(xiàn)效果的邏輯比較簡單,也就是slideDown()方法,
jquery slideDown()方法,實現(xiàn)滑動效果。
// shows a given element and hides all others
function showViaKeypress(element_id)
{
$(".container").css("display","none");
$(element_id).slideDown("slow");
}
// shows proper DIV depending on link 'href'
function showViaLink(array)
{
array.each(function(i)
{
$(this).click(function()
{
var target = $(this).attr("href");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}
而對鍵盤按鍵的監(jiān)聽是用的keypress()方法,其實也沒什么難度,不過我們很少在頁面上使用按鍵監(jiān)聽,這個例子比較新奇,值得我們參考,如有必要時,可以在項目里用用。
$(document).keypress(function(e)
{
switch(e.which)
{
// user presses the "a"
case 97: showViaKeypress("#home");
break;
// user presses the "s" key
case 115: showViaKeypress("#about");
break;
// user presses the "d" key
case 100: showViaKeypress("#contact");
break;
// user presses the "f" key
case 102: showViaKeypress("#awards");
break;
// user presses the "g" key
case 103: showViaKeypress("#links");
}
});
- 基于jquery的監(jiān)控數(shù)據(jù)是否發(fā)生改變
- jquery監(jiān)控數(shù)據(jù)是否變化(修正版)
- jquery.autocomplete修改實現(xiàn)鍵盤上下鍵自動填充示例
- jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁示例
- jquery.hotkeys監(jiān)聽鍵盤按下事件keydown插件
- jquery 按鍵盤上的enter事件
- 打造個性化的功能強大的Jquery虛擬鍵盤(VirtualKeyboard)
- jQuery監(jiān)控文本框事件并作相應處理的方法
- jQuery實現(xiàn)監(jiān)控頁面所有ajax請求的方法
- jQuery 監(jiān)控鍵盤一段時間沒輸入
相關文章
jQuery EasyUI API 中文文檔 - ValidateBox驗證框
jQuery EasyUI API 中文文檔 - ValidateBox驗證框,使用jQuery EasyUI的朋友可以參考下。2011-10-10JS遮罩層效果 兼容ie firefox jQuery遮罩層
史上最精簡,最強大的JS遮罩層效果,支持ie firefox jQuery遮罩層2010-07-07實例解析jQuery中如何取消后續(xù)執(zhí)行內(nèi)容
本文主要介紹了jQuery中取消后續(xù)執(zhí)行內(nèi)容的實例,代碼通俗易懂。需要的朋友來看下吧2016-12-12