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>
<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;
}
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;
}
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;
}
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操作选择性的写了几个样式，用户可以按照自己的需求对换肤效果进行美化。
以上只是一个模板的换肤效果，仅供参考！
Mr-sniper
北京市海淀区
邮箱：rafx_z@hotmail.com
北京市海淀区
邮箱：rafx_z@hotmail.com
