But I think this is not enough, after all, what are people packaged well, they have to study the original JavaScript in depth under the down-to-earth. See a good blog today, introduced a JS DOM programming based on a photo album instance, although this example is very small, but personally think that there is a very valuable learning, first give the HTML and effect map, which helps the back of JS understanding.
Copy Code code as follows:
<body>
<div id= "Content" >
<ul id= "Imagegallery" >
<li>
<a href= "photo/fireworks.jpg" title= "a fireworks display" >
</a>
</li>
<li>
<a href= "photo/coffee.jpg" title= "a cup of black coffee" >
</a>
</li>
<li>
<a href= "photo/rose.jpg" title= "A red, Red Rose" >
</a>
</li>
<li>
<a href= "photo/bigben.jpg" title= "the famous Clock" >
</a>
</li>
</ul>
</div>
</body>
The structure is quite simple, where the href attribute value of a element is the path to show the larger image, and IMG is the corresponding small figure. The effect is to click on the small image below, showing the corresponding large image.
The following JS implementation:
Copy Code code as follows:
<script type= "Text/javascript" >
/*3 the key function of the photo album code, the incoming parameter is a element * *
function Showpic (whichpic) {
if (!document.getelementbyid ("placeholder")) return true;
/* Get the href*/of a element
var Source = Whichpic.getattribute ("href");
var placeholder = document.getElementById ("placeholder");
/* Display Picture: Let the img element src become a element of href*/
Placeholder.setattribute ("src", source);
if (!document.getelementbyid ("description")) return false;
/* Get the title*/of a element
if (Whichpic.getattribute ("title")) {
var text = Whichpic.getattribute ("title");
} else {
var text = "";
}
/* Assign the title of a element to the descriptive text * *
var description = document.getElementById ("description");
if (Description.firstChild.nodeType = = 3) {
Description.firstChild.nodeValue = text;
}
return false;
}
/*2 to add the Click event Response function to all Imagegallery's a
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 ("a");
for (Var i=0 i < links.length; i++) {
Links[i].onclick = function () {
Return Showpic (this);
}
links[i].onkeypress = Links[i].onclick;
}
}
/* Add a function of 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. Code Start * *
function Prepareplaceholder () {
if (!document.createelement) return false;
if (!document.createtextnode) return false;
/* Create an IMG element, set its properties * *
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 a description * *
var description = document.createelement ("P");
Description.setattribute ("id", "description");
var desctext = document.createTextNode ("Choose an image");
Description.appendchild (Desctext);
/*imagegallery is the ul*/in the document.
var gallery = document.getElementById ("Imagegallery");
/* Insert large and descriptive text into the document * *
Gallery.parentNode.insertBefore (placeholder, gallery);
Gallery.parentNode.insertBefore (description, gallery);
}
/* Initialize the event * *
Addloadevent (Prepareplaceholder);
Addloadevent (Preparegallery);
</script>
Let's look at the Prepareplaceholder function, which creates an IMG element placeholder in this function, sets its corresponding attribute (ID, SRC, alt), and creates a P-element description. The P element inserts a text node using the AppendChild method to give a description of the photo, initially "Choose an image", and then find the UL through document.getElementById and insert the generated IMG and p into the picture list. Explain the use of InsertBefore, check the next Mozilla Developer Center:
var insertedelement = Parentelement.insertbefore (newelement, referenceelement);
Insertedelement is actually newelement, as a return result
Parentelement is the parent element to insert into which element
Newelement is, of course, the new element to be inserted.
Referenceelement refers to which element to insert before
We then look at the Preparegallery function, which is to assign a click event to each a element, where return Showpic returns false by default, to prevent the default behavior after clicking the A element (directly to the new page to display the picture).
Here is the core showpic function, which sets the SRC attribute for the IMG generated in the Prepareplaceholder function by obtaining the href and Title attribute values in the a element of the package corresponding to the small picture (the path of the large picture corresponding to the value of href). and p in the descriptive text to form the final effect. There is a nodetype, which can be found in the Mozilla Developer Center.
Finally, there is a very interesting function is addloadevent, very interesting ... With the sense of recursion, the event function is added as a queue and executed sequentially.
Oh, this album on the analysis to this, this is my first post, what is wrong or need to improve the place, I hope Bo friends a lot of advice, I will humbly accept, thank you.
Code package download
