javascript dom code application simple photo album [firefox only]_image special effects

But I think this is not enough. After all, everything is packaged by others. You have to learn the native javascript in depth to be practical. I saw a good blog post today, which introduced an example of a photo album based on js dom programming. Although this example is small, I personally think it is of great learning value. I will give the html and renderings first, which will help with the js later. understanding.
 

Copy code The code is as follows:

Snapshots

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  

The structure is quite simple. The href attribute value of the a element here is the path to display the large image, and img is the corresponding small image. The effect is to click on the small picture below and the corresponding large picture will be displayed above.
The js implementation is given below:

Copy code The code is as follows:

Let’s first look at the preparePlaceholder function. In this function, an img element placeholder is created, and its corresponding attributes (id, src, alt) are set. A p element description is also created, and the p element is inserted using the appendChild method. Create a text node to give a description of the photo, initially "choose an image", then find ul through document.getElementById, and insert the generated img and p before the picture list. To explain the usage of insertBefore, check Mozilla developer center:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

insertedElement is actually newElement, as a return result

parentElement is the parent element to be inserted, that is, which element is inserted into

newElement is of course the new element to be inserted

referenceElement refers to the element before which

should be inserted

We then look at the prepareGallery function. Its function is to assign a click event to each a element. Return showPic(this) returns false by default in order to prevent the default behavior after clicking on the a element (directly to the new Picture displayed on the page)

The following is the core showPic function. By obtaining the href and title attribute values ​​​​in the a element that wraps the corresponding small picture (the value of href is the path of the large picture corresponding to the small picture), it prepares the img generated in the preparePlaceholder function. Set the src attribute and the description text in p to form the final effect. There is a nodeType here, and the details can also be found in Mozilla developer center.

Finally, there is a very interesting function called addLoadEvent. It is very interesting... It has a recursive feeling. The event functions are added like a queue and then executed sequentially.

Haha, that’s all for the analysis of this photo album. This is my first blog post. If there is anything wrong or something that needs improvement, I hope fellow bloggers can give me some pointers. I will humbly accept it. Thank you.
Code package download