CSS滑鼠滑動瀏覽相簿

來源:互聯網
上載者:User

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



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.