Js Image Viewer, layer-by-layer display of the top and bottom strip

This is an image viewer using javascript. the next exit code is displayed at the layer. Pay attention to the functions $ (), addEvent (), and removeEvent () in the code () these functions are not encapsulated in the Image Viewer. I personally think they will be applied multiple times on the webpage. To avoid repeated code, they are not encapsulated. The Fade-in and fade-out effects are used in the example (only FF, IE testing is too resource-consuming, so give up), slide effect, and drag. Drag the handle on the right. The handle is transparent initially. When you place the cursor over the image, the image information is displayed.

Usage: pictureBox. init (boxId, coverId, range, picwidth, picheight );

BoxId: the id of the main frame of the Image Viewer. You can design the frame style accordingly. Custom

CoverId: Cover Layer id, self-Set

Rang: images in a certain range can be viewed in the Image Viewer. rang is a Node object.

Pictwidth: the width of the image to be displayed. Custom

Picheight: Specify the height of the image.

!! Note: The method must be called at the bottom of the document or in window. onload. However, we recommend that you call the method at the bottom of the document to avoid Image Viewer unavailability when the image is not loaded.

　　Instance:

This article demonstrates:Http://www.bkjia.com/a/demo/2010/js_pic_box.html

　　IMG Image Viewer (without the next effect ):Http://www.bkjia.com/a/view/17659.html

　　All methods:

1. init (): initializes the image viewer, including creating nodes and adding events.

2. createBox (): All nodes required to create an image Viewer

3. addEvents (): Add all required events to the node

4. drag (elem): enables you to drag node elem: drag the handle

6. fadeout (elem, start, end, speed): fade out documentElement elem: fade out element, int start transparency, int end transparency, frame speed: speed,

6. fadein (elem, start, end, speed): fade out documentElement elem: fade out element, int start transparency, int end transparency, frame speed: speed,

7. follow (source, follower, handlerBeforeFl): documentElement source: Following field, documentElement follower: Following element, function handlerBeforeFl: executed before following effect, can be empty

8. viewPic (container, src, handler): documentElement container: Image container, src: Image Source Address, handler: function for modifying source address, can be empty

9. hide (): hide the Image Viewer

10. start (): displays the image viewer.

11. _ imgHandler (src): Modify src, which corresponds to handler in viewPic. You can customize this function according to the actual situation.

12. _ handlerBeforeFl (): corresponds to handlerBeforeFl In follow. The function is to obtain the title information in the img tag, and use a semicolon as the line feed. You can also customize this function based on your actual situation.

13. _ coverWidth (): Return cover width

14. _ coverHeight (): returns the overwrite height.

Note: Functions $ (), addEvent (), and removeEvent () are not encapsulated in the Image Viewer, because I think these three functions will be applied multiple times on the webpage to avoid code duplication, therefore, it is not encapsulated.