使用CSS和JQuery轻松切换网页显示样式

八月 4, 2010 by zeze · 1 Comment

这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局（样式）的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。

首先我们看一下最终效果

我们来看一下它的创作过程（不止是完成切换功能，而是整个页面的设计要点）：

第一步：创建一个漂亮别致的边框

我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局，用它来作为我们信息显示的行和列。

HTML

<ul class="display">
	<li></li>
	<li></li>
</ul>

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>
<!--escription here--></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样式，所以我仅仅通过使用透明度使图片在划过时略微变暗；

a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

JQuery

最后，我们通过使用一点点JQuery技术来实现样式切换效果

<script type="text/javascript">
$(document).ready(function(){

	$("a.switch_thumb").toggle(function(){
		$(this).addClass("swap");
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").addClass("thumb_view");
		});
	}, function () {
		$(this).removeClass("swap");
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").removeClass("thumb_view");
		});
	}); 

});
</script>