|
英文原文：Sliding Photograph Galleries
翻譯整理：西米CC-www.ximicc.com
效果：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
這是一個很簡單的純CSS相冊滑動瀏覽效果，僅用一個無序列表ul結(jié)合簡單的CSS就可以實現(xiàn)。原文中介紹的縱向滑動相冊的實現(xiàn)方法，但是相比之下個人更喜歡橫向滑動的那個。兩者在縮略圖的實現(xiàn)上有所區(qū)別，前者是采用收縮原始圖片寬度的方法，會給人以很不自然的擠扁的感覺，而后者通過局部顯示原始圖片達(dá)到縮略的效果，雖然這種縮略圖不能讓我們概覽整張圖片，但我們可以通過提煉圖片重點特征或添加說明文字等方法，來提升瀏覽者對圖片的了解，最重要的是它在視覺協(xié)調(diào)性上更勝一籌。
首先來看一下XHTML部分，準(zhǔn)備好七張相冊圖片以及一張默認(rèn)的相冊背景圖win_backh.gif，把它們存儲在網(wǎng)站的windows目錄下，如前所述，七張圖片的縮略圖我們直接通過定義CSS來實現(xiàn)，不需要另外制作。我們以一個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)用了一個名為gallery的樣式，接下來的CSS都將針對#gallery及其下級元素進行定義。本例中的相冊圖片都有相同的尺寸320×240，背景圖片的尺寸為495×240。注意這里背景圖的寬度是根據(jù)本例的需要精確定義的，至于如何計算會在例子結(jié)束的時候進行說明�，F(xiàn)在在瀏覽器中顯示的僅僅是七張帶圓點和默認(rèn)鏈接邊框的圖片，接下來看一下#gallery中針對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將整個相冊居中，消除內(nèi)填充以及默認(rèn)的列表圓點符號。原文中#gallery還有一條overflow:hidden;語句，我把它去掉之后，相冊效果在IE6和FF中依然正常，不知是不是在其它瀏覽器中會出現(xiàn)Bug，若你了解個中因由，希望告知本站以及時糾正。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 純CSS實現(xiàn)相冊滑動瀏覽 [2]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 純CSS實現(xiàn)相冊滑動瀏覽 [1]
第 2 頁 
