Jquery 键盘按键监听与滑动效果的实例

发布时间:2019-09-10编辑:脚本学堂
本文介绍下,用jquery实现的滑动效果,以及对键盘按键进行监听的例子,有需要的朋友,可以参考学习下。

1,jquery slideDown()方法,实现滑动效果。
代码:

// 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");    
        });    
    });    
}

2,键盘按键的监听,则使用keypress()方法。
代码:

$(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");    
        }    
    });