ul結合CSS制作網頁相冊滑動瀏覽效果

2024-07-11 08:43:03

字體：大中小

來源：轉載

供稿：網友

英文原文：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，若你了解個中因由，希望告知本站以及時糾正。

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

下一篇：CSS Sprite圖片處理技巧