JQuery Tutorial: jQuery webpage image Switching Effect

JQuery Tutorial: jQuery webpage image Switching Effect

Suppose you have a set of works, and you don't need to jump to another page to display multiple images. you can load the jpg image into the target element. The following is an example of jQuery image switching effect:

The core jQuery code in this example:

$ (Document). ready (function (){

$ ("H2"). append ('<em> </em> ')

$ (". Thumbs a"). click (function (){

Var largePath = $ (this). attr ("href ");

Var largeAlt = $ (this). attr ("title ");

$ ("# LargeImg"). attr ({

Src: largePath,

Alt: largeAlt

});

$("H2 em" 2.16.html ("(" + largeAlt + ")");

Return false;

});

});

First, add an empty <em>Element.

When you click the link in <p>

Save the href attribute of the link to the "largePath" variable.

Save the title attribute to the "largeAlt" variable.

Replace the scr attribute of with the variable "largePath", and the alt attribute with the variable "largeAlt ".

Set the content of em (in h2) to the value of largeAlt.