创意论坛
收藏本页
联系站长
网站首页[新 闻]创意产业[设 计]网 页[博弈论]下 载创意市集
网站推荐&内容
网站声明
·尊重是互相的,本人时间有限,所以不可能面面俱到,请原谅!
·拼搏在于希望,快乐在于分享！
·您任意可以传播与复制本站设计界面,
但是【界面版权】仍规属于本站所有.
·您可以任意的修改本界面以及界面的html和css代码,
但是请不要用于商业用途.
·本站所有内容采用创作共用授权--署名和非商业用途。
网 页·其他信息
更新列表 - 推荐列表 - 热门列表 - 频道地图
+  位置： 龙觉资讯 >> 网 页 >> Web标准 >> 正文

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

作者:佚名 来源:不详 更新时间:2008-7-5 15:27:24 点击数：读取中...

英文原文：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，若你了解个中因由，希望告知本站以及时纠正。

+ 订阅更新 Rss
　　 　　
　　 　　
+ 频道推荐图文
10个经典的web2.
《墨攻》日文官方
曼联官方网站
ANNA SUI官方网站
Web 2.0 的视觉设
+ 网 页·频道头条关注