ul結(jié)合CSS制作網(wǎng)頁相冊(cè)滑動(dòng)瀏覽效果

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2023-05-21 15:14:12 作者：佚名

這是一個(gè)很簡單的純CSS相冊(cè)滑動(dòng)瀏覽效果，僅用一個(gè)無序列表ul結(jié)合簡單的CSS就可以實(shí)現(xiàn)。原文中介紹的縱向滑動(dòng)相冊(cè)的實(shí)現(xiàn)方法，但是相比之下個(gè)人更喜歡橫向滑動(dòng)的那個(gè)

英文原文：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實(shí)現(xiàn)相冊(cè)預(yù)覽 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>

這是一個(gè)很簡單的純CSS相冊(cè)滑動(dòng)瀏覽效果，僅用一個(gè)無序列表ul結(jié)合簡單的CSS就可以實(shí)現(xiàn)。原文中介紹的縱向滑動(dòng)相冊(cè)的實(shí)現(xiàn)方法，但是相比之下個(gè)人更喜歡橫向滑動(dòng)的那個(gè)。兩者在縮略圖的實(shí)現(xiàn)上有所區(qū)別，前者是采用收縮原始圖片寬度的方法，會(huì)給人以很不自然的擠扁的感覺，而后者通過局部顯示原始圖片達(dá)到縮略的效果，雖然這種縮略圖不能讓我們概覽整張圖片，但我們可以通過提煉圖片重點(diǎn)特征或添加說明文字等方法，來提升瀏覽者對(duì)圖片的了解，最重要的是它在視覺協(xié)調(diào)性上更勝一籌。
首先來看一下XHTML部分，準(zhǔn)備好七張相冊(cè)圖片以及一張默認(rèn)的相冊(cè)背景圖win_backh.gif，把它們存儲(chǔ)在網(wǎng)站的windows目錄下，如前所述，七張圖片的縮略圖我們直接通過定義CSS來實(shí)現(xiàn)，不需要另外制作。我們以一個(gè)ul作為容器把這幾張圖片添加到頁面中，并設(shè)置空鏈接，當(dāng)然你也可以在鏈接中設(shè)置具體的地址：

<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中我們只應(yīng)用了一個(gè)名為gallery的樣式，接下來的CSS都將針對(duì)#gallery及其下級(jí)元素進(jìn)行定義。本例中的相冊(cè)圖片都有相同的尺寸320×240，背景圖片的尺寸為495×240。注意這里背景圖的寬度是根據(jù)本例的需要精確定義的，至于如何計(jì)算會(huì)在例子結(jié)束的時(shí)候進(jìn)行說明?，F(xiàn)在在瀏覽器中顯示的僅僅是七張帶圓點(diǎn)和默認(rèn)鏈接邊框的圖片，接下來看一下#gallery中針對(duì)ul的樣式設(shè)定：

#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元素的寬和高與背景圖的尺寸保持一致，并設(shè)置了1px的外邊框。本例中通過margin將整個(gè)相冊(cè)居中，消除內(nèi)填充以及默認(rèn)的列表圓點(diǎn)符號(hào)。原文中#gallery還有一條overflow:hidden;語句，我把它去掉之后，相冊(cè)效果在IE6和FF中依然正常，不知是不是在其它瀏覽器中會(huì)出現(xiàn)Bug，若你了解個(gè)中因由，希望告知本站以及時(shí)糾正。

接下來將列表項(xiàng)目設(shè)置為左浮動(dòng)：

#gallery li {
float: left;
}

這個(gè)樣式現(xiàn)在不會(huì)對(duì)瀏覽器的解析效果產(chǎn)生任何影響，但它是必須的，它確保了分置在各個(gè)列表項(xiàng)中的圖片顯示在同一行，你可以在整體效果完成之后刪除這行代碼比較一下差別。接下來是一組很關(guān)鍵的CSS定義，針對(duì)li中的鏈接標(biāo)簽a：

#gallery li a {
display: block;
width: 28px;
height: 240px;
border-right: #fff 1px solid;
overflow: hidden;
cursor: default;
}

首先將鏈接對(duì)象轉(zhuǎn)換為塊級(jí)元素，以便為其設(shè)置寬和高，這里的寬度28px即縮略圖的截取區(qū)域，相冊(cè)中的圖片最好能進(jìn)行一些預(yù)處理，除了之前提到的尺寸規(guī)格之外，還可以看看能否在這28×240的縮略區(qū)內(nèi)盡可能多的傳遞圖片信息。這里面最重要的一行代碼是overflow: hidden; ，它讓圖片的可視部分限制在a標(biāo)簽的寬高范圍之內(nèi)。另外樣式中還定義了鼠標(biāo)指針的外觀，并為每個(gè)鏈接區(qū)域設(shè)置了1px的白色右邊框，讓其中的圖片之間具有更明顯的視覺分隔。

添加了鏈接的圖片，在瀏覽器中往往會(huì)顯示出紫色的外邊框，我們通過下面的CSS來消除它：

#gallery li a img {
border:0;
}

最后是鼠標(biāo)滑過時(shí)顯示完整圖片的實(shí)現(xiàn)，我們之所以在圖片上添加鏈接，很大一部分原因在于我們需要一個(gè)行為來觸發(fā)相冊(cè)瀏覽，而利用偽類a:hover來實(shí)現(xiàn)再適合不過了：

#gallery li a:hover {
width: 320px;
}

CSS中我們只要簡單的改變已經(jīng)轉(zhuǎn)換為塊級(jí)元素的a標(biāo)簽的寬度就可以了。

最后來說明一下ul的寬度為什么要設(shè)置為495px。結(jié)合縮略圖和大圖瀏覽的功能，相冊(cè)整體的寬度至少應(yīng)該是一張大圖加上六張小圖，即320 28×6=488px，而在設(shè)計(jì)的過程中，我們還未每個(gè)a標(biāo)簽添加了1px的右邊框，也就是每張圖片都有各自1px的右邊框，所以相冊(cè)的寬度在原來的基礎(chǔ)上再加7px，即最后的495px。