英文原文:Sliding Photograph Galleries
翻译整理:西米CC-www.ximicc.com
效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" /> < title >别开生面纯CSS实现相册预览 ximicc.com</ title > < style type = "text/css" > body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } #gallery { width:495px; height:240px; border: 1px solid #888; margin:0 auto; padding:0; list-style:none; background:#fff url(/files/080628/1_133958.gif); } #gallery li { float: left; } #gallery li a { display: block; width: 28px; height: 240px; border-right: #fff 1px solid; overflow: hidden; cursor: default; } #gallery li a img { border:0; } #gallery li a:hover { width: 320px; } #gallery2 { margin:0 auto; padding:0; list-style-type:none; overflow:hidden; width:572px; height:238px; border:1px solid #000; background:#fff url(/files/080628/1_134055.gif); } #gallery2 li { float:left; } #gallery2 li a { display:block; height:30px; width:572px; float:left; overflow: hidden; text-decoration:none; border-bottom:1px solid #000; cursor:default; } #gallery2 li a img { border:0; } #gallery2 li a:hover { background:#eee; height:144px; } #gallery2 li a:hover img { height:144px; } --> </ style > </ head > < body > < ul id = "gallery2" > < li >< a href = "http://jb51.net" > < img src = "/files/080628/1_134205.jpg" alt = "ximicc" title = "ximicc" /></ a ></ li > < li >< a href = "http://jb51.net" > < img src = "/files/080628/1_134245.jpg" alt = "ximicc" title = "ximicc" /></ a ></ li > < li >< a href = "http://jb51.net" > < img src = "/files/080628/1_134317.jpg" alt = "ximicc" title = "ximicc" /></ a ></ li > < li >< a href = "http://jb51.net" > < img src = "/files/080628/1_134352.jpg" alt = "ximicc" title = "ximicc" /></ a ></ li > </ ul > < div align = "center" > < p >< br /> < strong >原文地址:< a href = "http://www.cssplay.co.uk/menu/gallery3l" target = "_blank" >Sliding Photograph Galleries</ a ></ strong > < br /> < br />< strong >翻译整理:< a href = "http://jb51.net" target = "_blank" >西米CC www.ximicc.com</ a ></ strong > < br /> < br /> </ p >< br /> </ div > < ul id = "gallery" > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134517.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134549.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134618.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134651.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134720.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134752.jpg" /></ a ></ li > < li >< a href = "http://jb51.net" >< img src = "/files/080628/1_134821.jpg" /></ a ></ li > </ ul > </ body > </ html > |
这是一个很简单的纯CSS相册滑动浏览效果,仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法,但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别,前者是采用收缩原始图片宽度的方法,会给人以很不自然的挤扁的感觉,而后者通过局部显示原始图片达到缩略的效果,虽然这种缩略图不能让我们概览整张图片,但我们可以通过提炼图片重点特征或添加说明文字等方法,来提升浏览者对图片的了解,最重要的是它在视觉协调性上更胜一筹。
首先来看一下XHTML部分,准备好七张相册图片以及一张默认的相册背景图win_backh.gif,把它们存储在网站的windows目录下,如前所述,七张图片的缩略图我们直接通过定义CSS来实现,不需要另外制作。我们以一个ul作为容器把这几张图片添加到页面中,并设置空链接,当然你也可以在链接中设置具体的地址:
<ul id="gallery">
<li><a href="#"><img src="windows/b1.jpg" /></a></li>
<li><a href="#"><img src="windows/b2.jpg" /></a></li>
<li><a href="#"><img src="windows/b3.jpg" /></a></li>
<li><a href="#"><img src="windows/b4.jpg" /></a></li>
<li><a href="#"><img src="windows/b5.jpg" /></a></li>
<li><a href="#"><img src="windows/b6.jpg" /></a></li>
<li><a href="#"><img src="windows/b7.jpg" /></a></li>
</ul>
在ul中我们只应用了一个名为gallery的样式,接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320×240,背景图片的尺寸为495×240。注意这里背景图的宽度是根据本例的需要精确定义的,至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片,接下来看一下#gallery中针对ul的样式设定:
1
2
3
4
5
6
7
8
9
|
#gallery { width : 495px ; height : 240px ; border : 1px solid #888 ; margin : 0 auto ; padding : 0 ; list-style : none ; background : #fff url (windows/win_backh.gif); } |
ul元素的宽和高与背景图的尺寸保持一致,并设置了1px的外边框。本例中通过margin将整个相册居中,消除内填充以及默认的列表圆点符号。原文中#gallery还有一条overflow:hidden;语句,我把它去掉之后,相册效果在IE6和FF中依然正常,不知是不是在其它浏览器中会出现Bug,若你了解个中因由,希望告知本站以及时纠正。
接下来将列表项目设置为左浮动:
#gallery li {
float: left;
}
这个样式现在不会对浏览器的解析效果产生任何影响,但它是必须的,它确保了分置在各个列表项中的图片显示在同一行,你可以在整体效果完成之后删除这行代码比较一下差别。接下来是一组很关键的CSS定义,针对li中的链接标签a:
1
2
3
4
5
6
7
8
|
#gallery li a { display : block ; width : 28px ; height : 240px ; border-right : #fff 1px solid ; overflow : hidden ; cursor : default ; } |
首先将链接对象转换为块级元素,以便为其设置宽和高,这里的宽度28px即缩略图的截取区域,相册中的图片最好能进行一些预处理,除了之前提到的尺寸规格之外,还可以看看能否在这28×240的缩略区内尽可能多的传递图片信息。这里面最重要的一行代码是overflow: hidden; ,它让图片的可视部分限制在a标签的宽高范围之内。另外样式中还定义了鼠标指针的外观,并为每个链接区域设置了1px的白色右边框,让其中的图片之间具有更明显的视觉分隔。
添加了链接的图片,在浏览器中往往会显示出紫色的外边框,我们通过下面的CSS来消除它:
1
2
3
|
#gallery li a img { border : 0 ; } |
最后是鼠标滑过时显示完整图片的实现,我们之所以在图片上添加链接,很大一部分原因在于我们需要一个行为来触发相册浏览,而利用伪类a:hover来实现再适合不过了:
1
2
3
|
#gallery li a:hover { width : 320px ; } |
CSS中我们只要简单的改变已经转换为块级元素的a标签的宽度就可以了。
最后来说明一下ul的宽度为什么要设置为495px。结合缩略图和大图浏览的功能,相册整体的宽度至少应该是一张大图加上六张小图,即320 28×6=488px,而在设计的过程中,我们还未每个a标签添加了1px的右边框,也就是每张图片都有各自1px的右边框,所以相册的宽度在原来的基础上再加7px,即最后的495px。