DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> ul結合CSS制作網頁相冊滑動浏覽效果
ul結合CSS制作網頁相冊滑動浏覽效果
編輯:CSS進階教程     

英文原文:Sliding Photograph Galleries
翻譯整理:西米CC-www.ximicc.com

效果

運行代碼框

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

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

#gallery li {
    float: left;
}

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

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

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

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

#gallery li a img {
    border:0;
}

最後是鼠標滑過時顯示完整圖片的實現,我們之所以在圖片上添加鏈接,很大一部分原因在於我們需要一個行為來觸發相冊浏覽,而利用偽類a:hover來實現再適合不過了:

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

CSS中我們只要簡單的改變已經轉換為塊級元素的a標簽的寬度就可以了。

最後來說明一下ul的寬度為什麼要設置為495px。結合縮略圖和大圖浏覽的功能,相冊整體的寬度至少應該是一張大圖加上六張小圖,即320+28×6=488px,而在設計的過程中,我們還未每個a標簽添加了1px的右邊框,也就是每張圖片都有各自1px的右邊框,所以相冊的寬度在原來的基礎上再加7px,即最後的495px。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved