tion %> 别开生面:纯CSS实现相册滑动浏览|易点互动
当前位置:首页 > 建站知识

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

更新时间:2009.06.22 浏览次数:

效果

运行代码

<!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(/articleimg/2008/06/5905/windows/win_backh.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(/articleimg/2008/06/5905/windows/win_back.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="/articleimg/2008/06/5905/windows/1.jpg" alt="ximicc" title="ximicc" /></a></li>
<li><a href="http://ximicc.com">
<img src="/articleimg/2008/06/5905/windows/2.jpg" alt="ximicc" title="ximicc" /></a></li>
<li><a href="http://ximicc.com">
<img src="/articleimg/2008/06/5905/windows/3.jpg" alt="ximicc" title="ximicc" /></a></li>
<li><a href="http://ximicc.com">
<img src="/articleimg/2008/06/5905/windows/4.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="/articleimg/2008/06/5905/windows/b1.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b2.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b3.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b4.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b5.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b6.jpg" /></a></li>
 <li><a href="http://ximicc.com"><img src="/articleimg/2008/06/5905/windows/b7.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的样式设定:

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