Home > Web Front-end > JS Tutorial > Implement keyboard key monitoring based on Jquery_jquery

Implement keyboard key monitoring based on Jquery_jquery

WBOY
Release: 2016-05-16 16:48:52
Original
1318 people have browsed it

The article I saw from NETTUTS has a very good effect, somewhat similar to the effect produced by Flash. The demo is here. The original article explains the implementation steps very clearly, so I won’t mention it more. Implementation The logic of the effect is relatively simple, that is, the slideDown() method and the

jquery slideDown() method to achieve the sliding effect.

Copy code The code is as follows:

// 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()
                                                                                                            );
$(target).slideDown("slow");
});
The keypress() method is used to monitor keyboard keys, which is actually not difficult. However, we rarely use keypress monitoring on the page. This example is relatively novel and worthy of our reference. If necessary, you can add it to the project Use it inside.



Copy code

The code is as follows:

case 97: showViaKeypress("#home");                        break;                                  🎜>                                                                                                          es the "d" key
case 100 : showViaKeypress("#contact"); 🎜> break;

                                                                                                                                                                                         
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template