最近产品中需要加入“一个列表显示样式快速切换”的功能，正好在这篇文章中看到了它的实现方式，感觉很不错。
这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局（样式）的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。
首先我们看一下最终效果
![图片[1]-使用CSS和jQuery轻松切换网页显示样式-千百度社区](https://pic001.cnblogs.com/img/zklove1006/200912/2009122114433665.jpg)
第一步：创建一个漂亮别致的边框
我们首先通过一个无序列表标签(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
![图片[2]-使用CSS和jQuery轻松切换网页显示样式-千百度社区](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![图片[3]-使用CSS和jQuery轻松切换网页显示样式-千百度社区](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
代码
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>
源码下载：使用CSS和JQuery切换网页显示样式
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容