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



英文原文:Sliding Photograph Galleries
翻译整理:西米CC-www.ximicc.com
效果
运行代码框

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

这是一个很简单的纯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的样式设定:
#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,若你了解个中因由,希望告知本站以及时纠正。



相关阅读:
用 ajax 的方法解决网页广告显示的问题
CSS3属性box-shadow使用详细教程
html和xml中的转义字符在Flash as3中的用法浅析
SQL Server 2008索引存储结构分析
使用ODBC数据库管理Serv-U的FTP用户及相关ASP编程[附源码示例下载]
用来分割文本的vbs脚本
轻松玩转花样表单--表单提交
Linux桌面系统分区方案推荐
ubuntu下也玩windows游戏,三种途径开启魔
初学者必读:精讲SQL中的时间计算语句
PHP脚本的10个技巧(4)
如何将Windows 2003迁移至Windows 2008三
CSS padding属性定义边内补白
IE对CSS样式的数量和大小是有限制的
快速导航

Copyright © 2016 phpStudy |