使用CSS和jQuery輕松切換網頁顯示樣式

作者: IIduce 來源: css9 發布時間: 2009-12-21 14:53 閱讀: 9919 次推薦: 2 原文鏈接 [收藏]

最近產品中需要加入“一個列表顯示樣式快速切換”的功能，正好在這篇文章中看到了它的實現方式，感覺很不錯。

這篇文章講述的是如何通過CSS和JQuery來實現在頁面上快速切換布局（樣式）的功能。這樣做的好處是不言而喻的，現在的網頁設計都是希望增強與用戶的互動性。允許改變頁面布局或信息展示方式無疑可以提高用戶體驗，選擇他們喜歡的樣式去獲取信息。

首先我們看一下最終效果

第一步：創建一個漂亮別致的邊框

我們首先通過一個無序列表標簽(ul)來設計一個垂直的列表布局，用它來作為我們信息顯示的行和列。

HTML

CSS

提示：通過使用不同灰色的邊框實現了一個漂亮別致的邊框效果

ul.display {
float: left;
width: 756px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #333;
border-right: 1px solid #333;
background: #222;
}
ul.display li {
float: left;
width: 754px;
padding: 10px 0;
margin: 0;
border-top: 1px solid #111;
border-right: 1px solid #111;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}

第二步：為內容添加樣式

在每個列表項中，嵌套一個div作為內容的容器。

HTML

<li>
<div class="content_block">
<a href="#"><img src="sample.gif" alt="" /></a>
<h2><a href="#">Image Name</a></h2>
</div></li>

CSS

代碼

ul.display li a {
color: #e7ff61;
text-decoration: none;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px; /*--The left padding keeps the
content from flowing under the image--*/
font-size: 1.2em;
}
ul.display li .content_block a img{ /*--Double border technique--*/
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}

第三步：創建第二種顯示樣式

下面我們創建第二種樣式：水平多列顯示。

CSS

ul.thumb_view li{ width: 250px; } /*--Switch the width
to accommodate for the three column layout--*/
ul.thumb_view li h2 { display: inline; }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 0 0 10px; }

第四步：完成樣式切換功能

下面我們就集中精力完成最關鍵的一步：樣式切換

HTML

<a class="switch_thumb" href="#">Switch Display</a>

CSS

使用“CSS Sprites”技術來創建樣式切換的鏈接圖片（什么是”CSS Sprites“；你可以使用這個工具來實現它）

a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a.swap { background-position: left bottom; }

我不喜歡在圖片上創建Hover樣式，所以我僅僅通過使用透明度使圖片在劃過時略微變暗；