一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery实现键盘监听程序代码

时间:2014-10-16 编辑:简简单单 来源:一聚教程网

例子

 代码如下 复制代码

   

在应用中绑定事件的监控会更多,如我们利用上下页来实现键盘按左右来实现,下面整理了差不多的例子。


实现效果的逻辑比较简单,也就是slideDown()方法,
Js代码  收藏代码

 代码如下 复制代码
// 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");   
        });   
    });   
}   


 
 
而对键盘按键的监听是用的keypress()方法,其实也没什么难度,不过我们很少在页面上使用按键监听,这个例子比较新奇,值得我们参考,如有必要时,可以在项目里用用。
Js代码  收藏代码

 代码如下 复制代码
$(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");   
        }   
    }); 

热门栏目