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
posted @ 2011-06-20 22:23  Mr-sniper  阅读(581)  评论(0编辑  收藏  举报