用jQuery做网页换肤确实是很一个很巧妙,很好的选择,这是本人在学习jQuery中学的知识,感觉很有用,写了下来,希望大家有更好的方法或者代码不足的地方请谅解,本人也是初学者啊,希望大家互相勉励互相学习。闲话少说,归入正题。
首先HTML页面代码如下:
01
|
< div id = "header_demo" >
|
02
|
< a id = "logo" href = "#" >简明现代魔法</ a >
|
03
|
< ul id = "skin" >
|
04
|
< li id = "skin_0" title = "蓝色" class = "selected" >蓝色</ li >
|
05
|
< li id = "skin_1" title = "紫色" >紫色</ li >
|
06
|
< li id = "skin_2" title = "红色" >红色</ li >
|
07
|
< li id = "skin_3" title = "天蓝色" >天蓝色</ li >
|
08
|
< li id = "skin_4" title = "橙色" >橙色</ li >
|
09
|
< li id = "skin_5" title = "淡绿色" >淡绿色</ li >
|
10
|
</ ul >
|
11
|
</ div >
|
CSS文件,对应HTML:
01
|
/*头部样式开始*/
|
02
|
#header_demo{
|
03
|
width : 700px ;
|
04
|
height : 80px ;
|
05
|
border : 1px solid #AAAAAA ;
|
06
|
margin : 10px auto ;
|
07
|
/** background:#3B5998; **/
|
08
|
}
|
09
|
/*logo样式开始*/
|
10
|
#logo {
|
11
|
float : left ;
|
12
|
margin : 0 0 0 10px ;
|
13
|
color : #FFF ;
|
14
|
font-size : 3em ;
|
15
|
font-weight : 700 ;
|
16
|
line-height : 80px ;
|
17
|
}
|
18
|
/*切换皮肤样式*/
|
19
|
#skin {
|
20
|
float : right ;
|
21
|
margin : 10px ;
|
22
|
padding : 4px ;
|
23
|
width : 120px ;
|
24
|
list-style : none ;
|
25
|
border : 1px solid #CCCCCC ;
|
26
|
background : #FFF ;
|
27
|
}
|
28
|
#skin li {
|
29
|
float : left ;
|
30
|
margin-right : 4px ;
|
31
|
width : 15px ;
|
32
|
height : 15px ;
|
33
|
text-indent : -9999px ;
|
34
|
overflow : hidden ;
|
35
|
display : block ;
|
36
|
cursor : pointer ;
|
37
|
background-image : url (images/theme.gif);
|
38
|
}
|
39
|
#skin_ 0 { background-position : 0px 0px ; }
|
40
|
#skin_ 1 { background-position : 15px 0px ; }
|
41
|
#skin_ 2 { background-position : 35px 0px ; }
|
42
|
#skin_ 3 { background-position : 55px 0px ; }
|
43
|
#skin_ 4 { background-position : 75px 0px ; }
|
44
|
#skin_ 5 { background-position : 95px 0px ; }
|
45
|
#skin_ 0 .selected { background-position : 0px 15px ; }
|
46
|
#skin_ 1 .selected { background-position : 15px 15px ; }
|
47
|
#skin_ 2 .selected { background-position : 35px 15px ; }
|
48
|
#skin_ 3 .selected { background-position : 55px 15px ; }
|
49
|
#skin_ 4 .selected { background-position : 75px 15px ; }
|
50
|
#skin_ 5 .selected { background-position : 95px 15px ; }
|
然后你还要有一些备用的CSS,就是换肤所需要的,当你点击时,它们用的CSS是不同的,然后选中后,保存在Cookie中,在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式。
实现换肤的 JQuery 代码:
01
|
//网站换肤
|
02
|
$( function () {
|
03
|
var $li = $( "#skin li" ); //查找到元素
|
04
|
$li.click( function () { //给元素添加事件
|
05
|
switchSkin( this .id); //调用函数
|
06
|
});
|
07
|
//保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了
|
08
|
var cookie_skin = $.cookie( "MyCssSkin" ); //获取Cookie的值
|
09
|
if (cookie_skin) { //如果确实存在Cookie
|
10
|
switchSkin(cookie_skin); //执行
|
11
|
}
|
12
|
});
|
13
|
function switchSkin(skinName) {
|
14
|
$( "#" + skinName).addClass( "selected" ) //当前<li>元素选中
|
15
|
.siblings().removeClass( "selected" ); //去掉其他同辈<li>元素的选中
|
16
|
$( "#cssfile" ).attr( "href" , "css/skin/" + skinName + ".css" ); //设置不同皮肤
|
17
|
$.cookie( "MyCssSkin" , skinName, { path: '/' , expires: 10 }); //保存Cookie
|
18
|
}
|
就这么简单。
热门源码