jQuery网页换肤

　　　网页的换肤的原理很简单，可以通过js对dom的操作动态的更换div的样式实现更换肤色的效果，甚至将整个页面的布局焕然一新，这里只队针对做简单的实例，更多的功能，可以按照模式去扩展，jquery的使用是非常简单和灵活的，当然深入的jquery插件的编写需要对性能的考虑当然需要我们对于编程思想的把握，这里只用jquery在前端页面的用户体验上做简单的扩展:

本文章为原创文章，转载请注明出处: http://www.cnblogs.com/rafx/

准备工作：

images（用于存放必要的图片）

css文件夹（用于存放必要的css）

jquery1.3.1.js库可以从jquery的官方网站获得： http://jquery.com/

HTML structure：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title > New Document </ title >
< meta name ="Generator" content ="EditPlus" >
< meta name ="Author" content ="" >
< meta name ="Keywords" content ="" >
< meta name ="Description" content ="" >
< link href ="css/skin_0.css" rel ="stylesheet" type ="text/css" id ="cssfile" />
< script type ="text/javascript" src ="js/jquery-1.3.1.js" ></ script >
< script type ="text/javascript" >

$(document).ready( function (){ // 等文档加载完毕执行脚本

var $li = $( " #skin li " );
$li.click( function (){
$( " # " + this .id).addClass( " selected " ) // 当前的<li>元素被选中
.siblings().removeClass( " selected " ); // 去掉其他同辈元素<li>元素的选中
alert( ' nihao ' );
$( " #cssfile " ).attr( " href " , " css/ " + this .id + " .css " ); // 设置不同皮肤
$.cookie( " MyCssSkin " , this .id,{path: ' / ' ,expires: 10 }); // 计入cookie

})

});


</ script >
</ head >
< body >
< ul id ="skin" >
< li id ="skin_0" title ="轻度近视" class ="selected" > 轻度近视 </ li >
< li id ="skin_1" title ="中度近视" > 中度近视 </ li >
< li id ="skin_2" title ="严重近视" > 严重近视 </ li >
</ ul >
< div id ="div_side_0" >
< div id ="news" >
< h1 class ="title" > 时事新闻 </ h1 >
</ div >
</ div >
</ body >
</ html >

 CSS code：

 skin_0.css

.left {
float : left ;
}
body {
width : 1024px ;

}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : blue ;
}
#skin_1 {
background-color : red ;
}
#skin_2 {
background-color : green ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_bg.jpg) ;
font-size : 13px ;
font-color : blue ;

}

.selected {
width : 200px ;
}

 skin_1.css

.left {
float : left ;
}
body {
width : 1024px ;

}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background.jpg) ;
font-size : 23px ;
font-color : red ;

}

.selected {
width : 200px ;
}

 skin_2.css

.left {
float : left ;
}
body {
width : 1024px ;

}
ul li {
width : 70px ;
height : 20px ;
float : left ;
}
#skin {
width : 1024px ;
}
#skin_0 {
background-color : green ;
}
#skin_1 {
background-color : blue ;
}
#skin_2 {
background-color : red ;
}
#div_side_0 {
width : 1024px ;
float : left ;
background-image : url(../images/rf_background1.jpg) ;
font-size : 33px ;
font-color : green ;

}

.selected {
width : 200px ;
}

 

这里只针对jquery的dom操作选择性的写了几个样式，用户可以按照自己的需求对换肤效果进行美化。

 

以上只是一个模板的换肤效果，仅供参考！

qq:313247313
Email:rafx.z@hotmail.com
新浪微博: Mr-sniper

转载于:https://www.cnblogs.com/rafx/archive/2011/06/20/jqueryChangebackground.html