Keyboard key monitoring based on Jquery
- 2020-03-30 02:56:02
- OfStack
From NETTUTS see articles, the effect is very good, somewhat akin to make Flash effect, (link: http://demo.jb51.net/js/2014/KeyPress/), the original text speaks of implementation steps very clear, I won't mention, implementation effect of logic is simpler, namely slideDown () method,
Jquery slideDown() method for sliding.
// 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");
});
});
}
The keypress() method is not difficult, but we seldom use keypress on the page. This example is novel and worth referring to. If necessary, we can use it in the project.
$(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");
}
});