From the nettuts see the article, the effect is very good, a bit similar to the effect of Flash, demo here, the original to realize the steps are very clear, I do not mention, the logic of achieving results is relatively simple, that is, Slidedown () method,
jquery Slidedown () method to achieve sliding effect.
Copy Code code 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 ()
{
var target = $ (this). attr ("href");
$ (". Container"). CSS ("display", "none");
$ (target). Slidedown ("slow");
});
});
}
and the keyboard key to monitor the use of the KeyPress () method, in fact, there is no difficulty, but we rarely use the button on the page to monitor, this example is more novel, it is worth our reference, if necessary, can be used in the project.
Copy Code code as follows:
$ (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");
}
});