ul结合CSS制作网页相册滑动浏览效果
我要评论
英文原文：Sliding Photograph Galleries
翻译整理：西米CC-www.ximicc.com
效果：
<!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的样式设定：
#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：
#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来消除它：
#gallery li a img {
border:0;
}
最后是鼠标滑过时显示完整图片的实现，我们之所以在图片上添加链接，很大一部分原因在于我们需要一个行为来触发相册浏览，而利用伪类a:hover来实现再适合不过了：
#gallery li a:hover {
width: 320px;
}
CSS中我们只要简单的改变已经转换为块级元素的a标签的宽度就可以了。
最后来说明一下ul的宽度为什么要设置为495px。结合缩略图和大图浏览的功能，相册整体的宽度至少应该是一张大图加上六张小图，即320 28×6=488px，而在设计的过程中，我们还未每个a标签添加了1px的右边框，也就是每张图片都有各自1px的右边框，所以相册的宽度在原来的基础上再加7px，即最后的495px。
相关文章
这篇文章主要介绍了CSS在UL LI的样式用法，主要是UI上的应用，我们通过代码分离的方式通过css完全控制css的样式2023-05-21- 这篇文章主要介绍了CSS 实现磨砂玻璃(毛玻璃)样式,要实现磨砂玻璃背景，可以使用 CSS3 中的::before伪元素和backdrop-filter属性，结合opacity属性和blur()函数来实现，本2023-05-19
- 移动端常用的单位rem、vw、vh，本文主要介绍了VW、VH适配移动端的解决方案与常见问题，具有一定的参考价值，感兴趣的可以了解一下2023-05-15
什么是clearfix (一文搞清楚css清除浮动clearfix)
clearfix 是一种 CSS 技巧，可以在不添加新的 html 标签的前提下，解决让父元素包含浮动的子元素的问题。这个技巧的版本是很多的，最流行的一个是 Micro Clearfix Hack2023-05-12
CSS中的vertical-align用于设置行内块或者行内元素行内元素的对齐方式，使用过程中的坑很多，本文就详细的介绍一下vertical-align属性的具体使用方法，感兴趣的可以了解一2023-05-11
如何利用css var函数让你的组件样式输出规范样式API可定制性更高
我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况，今天通过本文给大家介绍如何利用css var函数让你的组件样式输出规2023-05-10- 这篇文章主要介绍了一行代码搞定 font-size 响应式,该属性设置元素的字体大小,font-size 属性可设置字体的尺寸,本文给大家介绍的非常详细，需要的朋友可以参考下2023-05-09
这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样2023-05-08
CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解2023-05-06
本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2023-05-05
最新评论