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

第ul結合CSS制作網頁相冊滑動瀏覽效果英文原文：SlidingPhotographGalleries

翻譯整理：西米CC-

效果：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/

title別開生面純CSS實現(xiàn)相冊預覽/title

styletype=text/css

body{

font-size:12px;

color:#CC0000;

background-color:#F1FAFE;

#gallery{

width:495px;

height:240px;

border:1pxsolid#888;

margin:0auto;

padding:0;

list-style:none;

background:#fffurl(/files/080628/1_133958.gif);

#galleryli{

float:left;

#gallerylia{

display:block;

width:28px;

height:240px;

border-right:#fff1pxsolid;

overflow:hidden;

cursor:default;

#galleryliaimg{

border:0;

#gallerylia:hover{

width:320px;

#gallery2{

margin:0auto;

padding:0;

list-style-type:none;

overflow:hidden;

width:572px;

height:238px;

border:1pxsolid#000;

background:#fffurl(/files/080628/1_134055.gif);

#gallery2li{

float:left;

#gallery2lia{

display:block;

height:30px;

width:572px;

float:left;

overflow:hidden;

text-decoration:none;

border-bottom:1pxsolid#000;

cursor:default;

#gallery2liaimg{

border:0;

#gallery2lia:hover{

background:#eee;

height:144px;

#gallery2lia:hoverimg{

height:144px;

/style

/head

body

ulid=gallery2

liahref=

imgsrc=/files/080628/1_134205.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134245.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134317.jpgalt=ximicctitle=ximicc//a/li

liahref=

imgsrc=/files/080628/1_134352.jpgalt=ximicctitle=ximicc//a/li

/ul

divalign=center

pbr/

strong原文地址：ahref=http://www.cssplay.co.uk/menu/gallery3ltarget=_blankSlidingPhotographGalleries/a/strong

br/

br/strong翻譯整理：ahref=target=_blank西米CC/a/strongbr/

br/

/pbr/

/div

ulid=gallery

liahref=imgsrc=/files/080628/1_134517.jpg//a/li

liahref=imgsrc=/files/080628/1_134549.jpg//a/li

liahref=imgsrc=/files/080628/1_134618.jpg//a/li

liahref=imgsrc=/files/080628/1_134651.jpg//a/li

liahref=imgsrc=/files/080628/1_134720.jpg//a/li

liahref=imgsrc=/files/080628/1_134752.jpg//a/li

liahref=imgsrc=/files/080628/1_134821.jpg//a/li

/ul

/body

/html

這是一個很簡單的純CSS相冊滑動瀏覽效果，僅用一個無序列表ul結合簡單的CSS就可以實現(xiàn)。原文中介紹的縱向滑動相冊的實現(xiàn)方法，但是相比之下個人更喜歡橫向滑動的那個。兩者在縮略圖的實現(xiàn)上有所區(qū)別，前者是采用收縮原始圖片寬度的方法，會給人以很不自然的擠扁的感覺，而后者通過局部顯示原始圖片達到縮略的效果，雖然這種縮略圖不能讓我們概覽整張圖片，但我們可以通過提煉圖片重點特征或添加說明文字等方法，來提升瀏覽者對圖片的了解，最重要的是它在視覺協(xié)調性上更勝一籌。

首先來看一下XHTML部分，準備好七張相冊圖片以及一張默認的相冊背景圖win_backh.gif，把它們存儲在網站的windows目錄下，如前所述，七張圖片的縮略圖我們直接通過定義CSS來實現(xiàn)，不需要另外制作。我們以一個ul作為容器把這幾張圖片添加到頁面中，并設置空鏈接，當然你也可以在鏈接中設置具體的地址：

ulid=gallery

liahref=#imgsrc=windows/b1.jpg//a/li

liahref=#imgsrc=windows/b2.jpg//a/li

liahref=#imgsrc=windows/b3.jpg//a/li

liahref=#imgsrc=windows/b4.jpg//a/li

liahref=#imgsrc=windows/b5.jpg//a/li

liahref=#imgsrc=windows/b6.jpg//a/li

liahref=#imgsrc=windows/b7.jpg//a/li

/ul

在ul中我們只應用了一個名為gallery的樣式，接下來的CSS都將針對#gallery及其下級元素進行定義。本例中的相冊圖片都有相同的尺寸320240，背景圖片的尺寸為495240。注意這里背景圖的寬度是根據(jù)本例的需要精確定義的，至于如何計算會在例子結束的時候進行說明?，F(xiàn)在在瀏覽器中顯示的僅僅是七張帶圓點和默認鏈接邊框的圖片，接下來看一下#gallery中針對ul的樣式設定：

#gallery{

width:495px;

height:240px;

border:1pxsolid#888;

margin:0auto;

padding:0;

list-style:none;

background:#fffurl(windows/win_backh.gif);

}

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

接下來將列表項目設置為左浮動：

float:left;

}

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

#gallerylia{

display:block;

width:28px;

height:240px;

border-right:#fff1pxsolid;

overflow:hidden;

cursor:default;

}

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

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

#galleryliaimg{

border:0;

}

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

#ga