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

站长资源 2024/9/22 佚名

2 0 1

英文原文：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://ximicc.com">

<img src="/files/080628/1_134205.jpg" alt="ximicc" title="ximicc" /></a></li>

<li><a href="http://ximicc.com">

<img src="/files/080628/1_134245.jpg" alt="ximicc" title="ximicc" /></a></li>

<li><a href="http://ximicc.com">

<img src="/files/080628/1_134317.jpg" alt="ximicc" title="ximicc" /></a></li>

<li><a href="http://ximicc.com">

<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://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="/files/080628/1_134517.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134549.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134618.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134651.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134720.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134752.jpg" /></a></li>

<li><a href="http://ximicc.com"><img src="/files/080628/1_134821.jpg" /></a></li>

</ul>

</body>

</html>

[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，若你了解个中因由，希望告知本站以及时纠正。
上一页12 下一页阅读全文

网页,效果,教程,网页制作,浏览,结合,制作,相册,<,"

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

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

CSS Sprite图片处理技巧

CSS教程：CSS到底是干什么用的？

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接