[JavaScript-implemented Image Viewer] similar to lightbox

I always think Javascript is a good thing and want to learn it well. Of course, I also had to learn something. After nearly a month, I finally got something to write.

Today, I have made an image viewer using JavaScript.

First look:

First, we will introduce the following functions:

1. Click the thumbnail to display the larger image. The larger image will cover the page.

2. The local image can be displayed. You only need to select an image to obtain the image address.

3. Add images dynamically. You can also click the image to display the larger image.

4. A close button is attached to the displayed big image. You can click the big image or close button to close the big image.

Specific implementation of each function:

(1) first set a fixed Div layer to hide. The DIV layer has an image label and the property SRC is null. Set the src attribute to the address of the thumbnail and set the DIV to visible on the click on the thumbnail event.

(2) Add a file tag and start the timer in The onclick method. After a local image is selected, the image address will appear in the text box in the file tag, at this time, the timer copies the address to the DIV layer displayed in the big graph,

Set the DIV layer to visible.

(3) adding images dynamically means adding a tag and setting attributes. However, it is a little complicated to bind events.

There are different binding methods based on the browser:

 

If (element. addeventlistener) {// Mozilla, Netscape, Firefox element. addeventlistener ('click', play, false);} else if (element. attachevent) {// ie element. attachevent ("onclick", play );}
 

Play is the method name.

(4) In order to have a better user experience, add a close button next to the big picture. In fact, a button label is added to the image tag, and a method is bound to it. Of course, The onclick event on the Image

The disabled method is also bound to the user experience.

Various technologies used:

I. Timer operation:

Set the timer: setinterval (getpic, 500). getpic indicates the function name, and 500 indicates that the timer runs every 0.5 seconds.

Clear Timer: window. clearinterval (interval);, when the timer is cleared, the input parameter is the timer number: var interval = setinterval (getpic, 500); a global variable needs to be defined here.

II. DOM technology: Tag operations.

Obtain the tag: Document. getelementbyid ("fixpic"). The input parameter is the tag ID.

Modify the attributes of a tag: Document. getelementbyid ("fixpic"). setattribute ("src", URL );

Of course, this image viewer can be expanded a lot, and interested readers can implement it as needed. The difficulty is how to implement it. Check whether your brain is flexible and whether there is a good method.

In the timer, there are some difficult points to control. For example, when should you disable the timer after it is enabled? When can I turn it on again?

If you have any questions about these logics, you are welcome to discuss them with me.

Almost forgot the source code: http://files.cnblogs.com/Zeech-Lee/javascript.rar