JQuery网页换肤

现在介绍网页换肤 的例子已经数不胜数，自己也没有仔细研究过，刚搞遇到类似这个问题，网上查了资料解决了问题，感觉很有用，就记录了下来和大家分享一下。效果很简单，我就直接讲怎么使用的。

其中用到了jquery .cookie.js

首先是html代码：

XML/HTML代码

<
div
 
id
=
"header_demo"
>
    <
a
 
id
=
"logo"
 
href
=
"#"
>
Rainweb
</
a
>
        <
ul
 
id
=
"skin"
>
            <
li
 
id
=
"skin_0"
 
title
=
"蓝色"
 
class
=
"selected"
>
蓝色
</
li
>
            <
li
 
id
=
"skin_1"
 
title
=
"紫色"
>
紫色
</
li
>
            <
li
 
id
=
"skin_2"
 
title
=
"红色"
>
红色
</
li
>
            <
li
 
id
=
"skin_3"
 
title
=
"天蓝色"
>
天蓝色
</
li
>
            <
li
 
id
=
"skin_4"
 
title
=
"橙色"
>
橙色
</
li
>
            <
li
 
id
=
"skin_5"
 
title
=
"淡绿色"
>
淡绿色
</
li
>
        </
ul
>
</
div
>

 

 

CSS代码：

CSS代码

/*头部样式开始*/
#header
_demo{
    width
:
700px
;
    height
:
80px
;
    border
: 
1px
 
solid
 
#AAAAAA
;
    margin
:
10px
 
auto
;
    /** background:#3B5998; **/
}
/*logo样式开始*/
#logo
 {
    float
:
left
;
    margin
:0 0 0 
10px
;
    color
:
#FFF
;
    font-size
:3em;
    font-weight
:700;
    line-height
:
80px
;
}
/*切换皮肤样式*/
#skin
 {
    float
:
right
right
;
    margin
:
10px
;
    padding
:
4px
;
    width
:
120px
;
    list-style
:
none
;
    border
: 
1px
 
solid
 
#CCCCCC
;
    background
:
#FFF
;
}
#skin
 li {
    float
:
left
;
    margin-right
:
4px
;
    width
:
15px
;
    height
:
15px
;
    text-indent
:-
9999px
;
    overflow
:
hidden
;
    display
:
block
;
    cursor
:
pointer
;
    background-image
:
url
(images/theme.gif);
}
#skin
_0 { 
background-position
:
0px
 
0px
; }
#skin
_1 { 
background-position
:
15px
 
0px
; }
#skin
_2 { 
background-position
:
35px
 
0px
; }
#skin
_3 { 
background-position
:
55px
 
0px
; }
#skin
_4 { 
background-position
:
75px
 
0px
; }
#skin
_5 { 
background-position
:
95px
 
0px
; }
#skin
_0.selected { 
background-position
:
0px
 
15px
; }
#skin
_1.selected { 
background-position
:
15px
 
15px
; }
#skin
_2.selected { 
background-position
:
35px
 
15px
; }
#skin
_3.selected { 
background-position
:
55px
 
15px
; }
#skin
_4.selected { 
background-position
:
75px
 
15px
; }
#skin
_5.selected { 
background-position
:
95px
 
15px
; }

 

javascript代码：

JavaScript代码

//网站换肤
$(function
 () {
    var
 $li = $(
"#skin li"
);  
//查找到元素
    $li.click(function
 () {   
//给元素添加事件
        switchSkin(this
.id);
//调用函数
    });
    //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了
    var
 cookie_skin = $.cookie(
"MyCssSkin"
);     
//获取Cookie的值
    if
 (cookie_skin) {                          
//如果确实存在Cookie
        switchSkin(cookie_skin);     //执行
    }
});
function
 switchSkin(skinName) {
    $("#"
 + skinName).addClass(
"selected"
)                
//当前<li>元素选中
                       .siblings().removeClass("selected"
);  
//去掉其他同辈<li>元素的选中
    $("#cssfile"
).attr(
"href"
, 
"css/skin/"
 + skinName + 
".css"
); 
//设置不同皮肤
    $.cookie("MyCssSkin"
, skinName, { path: 
'/'
, expires: 10 });  
//保存Cookie
    alert(skinName);
}

 

最后就是一个link文件：

XML/HTML代码

<
link
 
id
=
"cssfile"
 
type
=
"text/css"
 
href
=
"css/skin/skin_5.css"
 
rel
=
"Stylesheet"
>

 

演示地址：http://www.wufangbo.com/demo/jquery/05/index.html

下载地址：http://www.wufangbo.com/demo/jquery/05/05.rar

转载至(http://www.wufangbo.com/jquery-page-peels)