网页换肤
图示：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<!--正文css样式-->
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#div_side_0,#div_side_1
{
float:left;
width:120px;
height:450px;
}
#skin
{
margin:10px;
padding:5px;
width:210px;
padding-right:0px;
list-style:none;
border: 1px solid #CCCCCC;
overflow:hidden;
}
#skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(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 !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}
.title
{
cursor:pointer;}
h1{
margin:10px;
padding:10px 20px;
width:60px;
color:#ffffff;
font-size:14px;
}
a:link {
text-decoration: none;
color: #333333;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<!--网页换肤js文件-->
<script type="text/javascript">
$(function(){
var $li = $("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //当前li元素被选中
.siblings().removeClass("selected"); //去掉同辈li元素被选中
$("#cssfile").attr("href","css/"+this.id+".css"); //设置不同皮肤
});
})
</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>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div>
</body>
</html>
以上代码就可以实现网页换肤了 不过还存在一个问题当用户刷新页面或关闭浏览器，皮肤就会初始化，因此需要对当前的皮肤进行保存，那么将引入jQ的库cookie,将在我的下一篇博客中提到
浙公网安备 33010602011771号