ul结合CSS制作网页相册滑动浏览效果

第ul结合CSS制作网页相册滑动浏览效果英文原文：SlidingPhotographGalleries

翻译整理：西米CC-

效果：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/

title别开生面纯CSS实现相册预览/title

styletype=text/css

body{

font-size:12px;

color:#CC0000;

background-color:#F1FAFE;

#gallery{

width:495px;

height:240px;

border:1pxsolid#888;

margin:0auto;

padding:0;

list-style:none;

background:#fffurl(/files/080628/1_133958.gif);

#galleryli{

float:left;

#gallerylia{

display:block;

width:28px;

height:240px;

border-right:#fff1pxsolid;

overflow:hidden;

cursor:default;

#galleryliaimg{

border:0;

#gallerylia:hover{

width:320px;

#gallery2{

margin:0auto;

padding:0;

list-style-type:none;

overflow:hidden;

width:572px;

height:238px;

border:1pxsolid#000;

background:#fffurl(/files/080628/1_134055.gif);

#gallery2li{

float:left;

#gallery2lia{

display:block;

height:30px;

width:572px;

float:left;

overflow:hidden;

text-decoration:none;

border-bottom:1pxsolid#000;

cursor:default;

#gallery2liaimg{

border:0;

#gallery2lia:hover{

background:#eee;

height:144px;

#gallery2lia:hoverimg{

height:144px;

/style

/head

body

ulid=gallery2

liahref=

imgsrc=/files/080628/1_134205.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134245.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134317.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134352.jpgalt=ximicctitle=ximicc//a/li

/ul

divalign=center

pbr/

strong原文地址：ahref=http://www.cssplay.co.uk/menu/gallery3ltarget=_blankSlidingPhotographGalleries/a/strong

br/

br/strong翻译整理：ahref=target=_blank西米CC/a/strongbr/

br/

/pbr/

/div

ulid=gallery

liahref=imgsrc=/files/080628/1_134517.jpg//a/li

liahref=imgsrc=/files/080628/1_134549.jpg//a/li

liahref=imgsrc=/files/080628/1_134618.jpg//a/li

liahref=imgsrc=/files/080628/1_134651.jpg//a/li

liahref=imgsrc=/files/080628/1_134720.jpg//a/li

liahref=imgsrc=/files/080628/1_134752.jpg//a/li

liahref=imgsrc=/files/080628/1_134821.jpg//a/li

/ul

/body

/html

这是一个很简单的纯CSS相册滑动浏览效果，仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法，但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别，前者是采用收缩原始图片宽度的方法，会给人以很不自然的挤扁的感觉，而后者通过局部显示原始图片达到缩略的效果，虽然这种缩略图不能让我们概览整张图片，但我们可以通过提炼图片重点特征或添加说明文字等方法，来提升浏览者对图片的了解，最重要的是它在视觉协调性上更胜一筹。

首先来看一下XHTML部分，准备好七张相册图片以及一张默认的相册背景图win_backh.gif，把它们存储在网站的windows目录下，如前所述，七张图片的缩略图我们直接通过定义CSS来实现，不需要另外制作。我们以一个ul作为容器把这几张图片添加到页面中，并设置空链接，当然你也可以在链接中设置具体的地址：

ulid=gallery

liahref=#imgsrc=windows/b1.jpg//a/li

liahref=#imgsrc=windows/b2.jpg//a/li

liahref=#imgsrc=windows/b3.jpg//a/li

liahref=#imgsrc=windows/b4.jpg//a/li

liahref=#imgsrc=windows/b5.jpg//a/li

liahref=#imgsrc=windows/b6.jpg//a/li

liahref=#imgsrc=windows/b7.jpg//a/li

/ul

在ul中我们只应用了一个名为gallery的样式，接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320240，背景图片的尺寸为495240。注意这里背景图的宽度是根据本例的需要精确定义的，至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片，接下来看一下#gallery中针对ul的样式设定：

#gallery{

width:495px;

height:240px;

border:1pxsolid#888;

margin:0auto;

padding:0;

list-style:none;

background:#fffurl(windows/win_backh.gif);

}

ul元素的宽和高与背景图的尺寸保持一致，并设置了1px的外边框。本例中通过margin将整个相册居中，消除内填充以及默认的列表圆点符号。原文中#gallery还有一条overflow:hidden;语句，我把它去掉之后，相册效果在IE6和FF中依然正常，不知是不是在其它浏览器中会出现Bug，若你了解个中因由，希望告知本站以及时纠正。

接下来将列表项目设置为左浮动：

float:left;

}

这个样式现在不会对浏览器的解析效果产生任何影响，但它是必须的，它确保了分置在各个列表项中的图片显示在同一行，你可以在整体效果完成之后删除这行代码比较一下差别。接下来是一组很关键的CSS定义，针对li中的链接标签a：

#gallerylia{

display:block;

width:28px;

height:240px;

border-right:#fff1pxsolid;

overflow:hidden;

cursor:default;

}

首先将链接对象转换为块级元素，以便为其设置宽和高，这里的宽度28px即缩略图的截取区域，相册中的图片最好能进行一些预处理，除了之前提到的尺寸规格之外，还可以看看能否在这28240的缩略区内尽可能多的传递图片信息。这里面最重要的一行代码是overflow:hidden;，它让图片的可视部分限制在a标签的宽高范围之内。另外样式中还定义了鼠标指针的外观，并为每个链接区域设置了1px的白色右边框，让其中的图片之间具有更明显的视觉分隔。

添加了链接的图片，在浏览器中往往会显示出紫色的外边框，我们通过下面的CSS来消除它：

#galleryliaimg{

border:0;

}

最后是鼠标滑过时显示完整图片的实现，我们之所以在图片上添加链接，很大一部分原因在于我们需要一个行为来触发相册浏览，而利用伪类a:hover来实现再适合不过了：

#ga