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

2021年1月12日   |   by tgcode

最近产品中需要加入“一个列表显示样式快速切换”的功能,正好在这篇文章中看到了它的实现方式,感觉很不错。

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

首先我们看一下最终效果

%title插图%num

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

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

HTML

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->ul class="display">
li>li>
li>li>
ul>

CSS

提示:通过使用不同灰色的边框实现了一个漂亮别致的边框效果

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->li>
div class="content_block">
a href="#">img src="sample.gif" alt="" />a>
h2>a href="#">Image Namea>h2>
<!--escription here-->div>li>

CSS

%title插图%num%title插图%num代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://wwtgcodew.CodeHighlighter.com/

-->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;
}

第三步:创建第二种显示样式

下面我们创建第二种样式:水平多列显示。

%title插图%num

CSS

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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; }

第四步:完成样式切换功能

下面我们就集中精力完成最关键的一步:样式切换

%title插图%num

HTML

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->a class="switch_thumb" href="#">Switch Displaya>

CSS

使用“CSS Sprites”技术来创建样式切换的链接图片(什么是”CSS Sprites“;你可以使用这个工具来实现它)

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

我不喜欢在图片上创建Hover样式,所以我仅仅通过使用透明度使图片在划过时略微变暗;

<!--

Code highlighting produced by Actipro CodeHighlitgcodeghter (freeware)
http://www.CodeHighlighter.com/

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

jQUery

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

%title插图%num%title插图%num代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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>

源码下载:使用CSS和JQuery切换网页显示样式

相关推荐: 经典 Javascript 正则表达式

正则表达式用于字符串处理,表单验证等场合,实用高效,但用到时总是不太把握,以致往往要上网查一番。我将一些常用的表达式收藏在这里,作备忘之用。 匹配中文字符的正则表达式: [u4e00-u9fa5] 匹配双字节字符(包括汉字在内): [^x00-xff] 应用:…

Tags: , , ,