别开生面：纯CSS实现相册滑动浏览

作者：ximicc 来源：西米CC 时间：2008-06-26 13:24:00　

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

本例相关素材下载

演示：

<!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(/file/UploadPic/20086/26/2008626133521676.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(/file/UploadPic/20086/26/2008626133522275.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://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133522974.jpg" alt="ximicc" title="ximicc" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133522428.jpg" alt="ximicc" title="ximicc" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133522487.jpg" alt="ximicc" title="ximicc" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133523627.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://ximicc.com" target="_blank">西米CC www.ximicc.com</a></strong> <br /> <br /> </p><br /></div><ul id="gallery"><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133523189.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133523589.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133523630.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133523790.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133524868.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133524970.jpg" /></a></li><li><a href="http://ximicc.com"><img src="https://img.aspxhome.com/file/UploadPic/20086/26/2008626133524875.jpg" /></a></li></ul></body></html>

首先来看一下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，若你了解个中因由，希望告知本站以及时纠正。

2 下一页

标签：相册,css,滑动

投稿

别开生面：纯CSS实现相册滑动浏览

猜你喜欢

从trim原型函数看js正则表达式的性能

Python爬虫解析网页的4种方式实例及原理解析

css基础教程属性篇之盒子模型

golang image图片处理示例

MySQL索引背后的之使用策略及优化(高性能索引策略)

python完成FizzBuzzWhizz问题(拉勾网面试题)示例

Python函数式编程之返回函数实例详解

asp如何使用ADO 2x Command 对象读取数据？

python检查URL是否正常访问的小技巧

Python+selenium实现自动循环扔QQ邮箱漂流瓶

select into from和insert into select的使用举例详解

简单了解Python多态与属性运行原理

Mysql 查询数据库容量大小的方法步骤

Go语言实现JSON解析的方法详解

浅析MySQL replace into 的用法

django为Form生成的label标签添加class方式

python3应用windows api对后台程序窗口及桌面截图并保存的方法

Ubuntu20下的Django安装的方法步骤

浅析pandas随机排列与随机抽样

MySQL数据库安装和Navicat for MySQL配合使用教程