Home > Developer > JavaScript
The structure is quite simple. Here, the href attribute value of element a is the path of the big image to be displayed, and the img is the corresponding small image. The effect is to click the small image below, and the corresponding big image is displayed above.
The js implementation is given below:Copy codeThe Code is as follows: <script type = "text/javascript">
/* 3 key function of the album code. The input parameter is element */
Function showPic (whichpic ){
If (! Document. getElementById ("placeholder") return true;
/* Obtain the href of element */
Var source = whichpic. getAttribute ("href ");
Var placeholder = document. getElementById ("placeholder ");
/* Display image: Change the src of the img element to the href of element */
Placeholder. setAttribute ("src", source );
If (! Document. getElementById ("description") return false;
/* Obtain the title of element */
If (whichpic. getAttribute ("title ")){
Var text = whichpic. getAttribute ("title ");
} Else {
Var text = "";
}
/* Assign the title of Element a to the description text */
Var description = document. getElementById ("description ");
If (description. firstChild. nodeType = 3 ){
Description. firstChild. nodeValue = text;
}
Return false;
}
/* 2 Add the click Event Response Function to a of all imagegallery */
Function prepareGallery (){
If (! Document. getElementsByTagName) return false;
If (! Document. getElementById) return false;
If (! Document. getElementById ("imagegallery") return false;
Var gallery = document. getElementById ("imagegallery ");
Var links = gallery. getElementsByTagName ("");
For (var I = 0; I <links. length; I ++ ){
Links [I]. onclick = function (){
Return showPic (this );
}
Links [I]. onkeypress = links [I]. onclick;
}
}
/* Add the load Event Response Function */
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
/* 1. Start Code */
Function preparePlaceholder (){
If (! Document. createElement) return false;
If (! Document. createTextNode) return false;
/* Create an img element and set its attributes */
Var placeholder = document. createElement ("img ");
Placeholder. setAttribute ("id", "placeholder ");
Placeholder. setAttribute ("src", "photo/placeholder.gif ");
Placeholder. setAttribute ("alt", "my image gallery ");
/* Create a paragraph as the description */
Var description = document. createElement ("p ");
Description. setAttribute ("id", "description ");
Var desctext = document. createTextNode ("choose an image ");
Description. appendChild (desctext );
/* Imagegallery is ul in the document */
Var gallery = document. getElementById ("imagegallery ");
/* Insert the large image and description text into the document */
Gallery. parentNode. insertBefore (placeholder, gallery );
Gallery. parentNode. insertBefore (description, gallery );
}
/* Initialize the event */
AddLoadEvent (preparePlaceholder );
AddLoadEvent (prepareGallery );
</Script>
Let's first look at the preparePlaceholder function. In this function, an img element placeholder is created, its corresponding attributes (id, src, alt) are set, and a p element description is created, in the p element, a text node is inserted using the appendChild method to describe the photo. The initial value is "choose an image", and then the content is displayed in the document. getElementById: locate ul and insert the generated img and p to the image list. Describes how to use insertBefore and check the Mozilla developer center:
Var insertedElement = parentElement. insertBefore (newElement, referenceElement );
InsertedElement is actually a newElement, as a returned result
ParentElement is the parent element to be inserted, that is, the element to be inserted.
NewElement is the new element to be inserted.
ReferenceElement indicates the element to be inserted before
Let's look at the prepareGallery function, which assigns a click event to each a element, where return showPic (this) returns false by default, it is to prevent the default action after clicking Element a (display the image directly on the new page)
The following is the core showPic function. It obtains the href and title attribute values (the href value is the path of the large image corresponding to the small image) in element a of the corresponding small image ), to set the src attribute and the description text in p for the img generated in the preparePlaceholder function to form the final effect. There is a nodeType here, which can also be found in Mozilla developer center.
The last interesting function is addLoadEvent, which is very interesting... there is a sense of recursion. The event function is added like a queue and then executed sequentially.
Haha, this album has been analyzed here. This is my first blog post. What is wrong or needs to be improved? I hope you can give me some advice and I will accept it with an open mind. Thank you.
Package and download code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
