CSS Mouse Slide Browse album

The following is the HTML page special effects code, click the Run button to see the effect:
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

This is a very simple pure CSS album sliding browsing effect, only with a list of No series UL combined with simple CSS can be achieved. The method of vertical sliding album is introduced in the original text, but in comparison, the individual prefers to slide horizontally. The two in the implementation of the thumbnail is different, the former is a contraction of the original image width of the method, will give a very unnatural feeling of squeezing, the latter through the partial display of the original image to achieve the effect of shortening, although this thumbnail can not let us overview of the entire picture, However, we can improve the viewer's understanding of the picture by refining the key features of the image or adding explanatory text, the most important thing is that it is better in visual coordination.

First look at the XHTML section, prepare seven photo albums and a default photo album background win_backh.gif, store them in the Web site's Windows directory, as mentioned above, seven pictures of thumbnails we directly through the definition of CSS to achieve, do not need additional production. We use a UL as a container to add these pictures to the page, and set up a blank link, of course, you can also set the specific address in the link:

<ul id= "Gallery" >
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>

In the UL we only applied a style named Gallery, the next CSS will be defined for the #gallery and its subordinate elements. The photo album in this example has the same size 320x240, and the background picture is 495x240. Note that the width of the background image is defined precisely according to the needs of this example, as to how the calculation will be explained at the end of the example. Now in the browser is only seven pictures with dots and default link border, next look at the #gallery for UL style settings:

#gallery {
width:495px;
height:240px;
border:1px solid #888;
margin:0 Auto;
padding:0;
List-style:none;
Background: #fff URL (windows/win_backh.gif);
}

The width and height of the UL elements are consistent with the size of the background image, and the outer frame of the 1px is set. In this example, the entire album is centered through margin, eliminating the inner padding and the default list dot symbol. In the original text #gallery also has a overflow:hidden, the statement, I took it out, the album effect in IE6 and FF is still normal, I do not know if there will be bugs in other browsers, if you understand the cause, hope to inform this site to timely correction.