jQuery之网页换肤实现代码-jquery

时间：2016-04-14

下面是代码：
首先HTML页面代码如下：

代码如下:

 
<!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>Jacob Song的购物网站</title> 
<link rel="Stylesheet" href="css/header.css" type="text/css" /> 
<link rel="Stylesheet" href="css/skin/skin_0.css" type="text/css" id="cssfile" /> 
</head> 
<body> 
<script language="javascript" src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<!--引用了一个Cookie插件，您可以下载Cookie插件，也可以用我的源代码插件，下面有下载的--> 
<script language="javascript" src="Scripts/jquery.cookie.js" type="text/javascript"></script> 
<!--这是Scripts文件夹中的核心代码ChangeSkin.js--> 
<script language="javascript" src="Scripts/ChangeSkin.js" type="text/javascript"></script> 
<div id="header"> 
<a id="logo" href="#">我的购物网站</a> 
<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> 
</body> 
</html> 

CSS文件，对应HTML

代码如下:

 
/*头部样式开始*/ 
#header{ 
width:800px; 
height:80px; 
border: 1px solid #AAAAAA; 
margin:10px auto; 
background:#3B5998; 
} 
/*logo样式开始*/ 
#logo { 
float:left; 
margin:0 0 0 10px; 
color:#FFF; 
font-size:3em; 
font-weight:700; 
line-height:80px; 
} 
/*切换皮肤样式*/ 
#skin { 
float:right; 
margin:10px; 
padding:4px; 
width:120px; 
list-style:none; 
border: 1px solid #CCCCCC; 
background:#FFF; 
} 
#skin li { 
float:left; 
margin-right:4px; 
width:15px; 
height:15px; 
text-indent:-9999px; 
overflow:hidden; 
display:block; 
cursor:pointer; 
background-image:url(../Imgs/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; } 
#skin_1.selected { background-position:15px 15px; } 
#skin_2.selected { background-position:35px 15px; } 
#skin_3.selected { background-position:55px 15px; } 
#skin_4.selected { background-position:75px 15px; } 
#skin_5.selected { background-position:95px 15px; } 

然后你还要有一些备用的CSS，就是换肤所需要的，当你点击时，它们用的CSS是不同的，然后选中后，保存在Cookie中，在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式
Skin_0.css文件如下：

代码如下:

 
#header{ 
background:#3B5998; 
} 

Skin_1.css文件如下：

代码如下:

 
#header{ 
background:#BB3BD9; 
} 

Skin_2.css文件如下：

代码如下:

 
#header{ 
background:#E31559; 
} 

Skin_3.css文件如下：

代码如下:

 
#header{ 
background:#08BECE; 
} 

Skin_4.css文件如下：

代码如下:

 
#header{ 
background:#FBA60A; 
} 

Skin_5.css文件如下：

代码如下:

 
#header{ 
background:#AFD400; 
} 

其实可以看出简单的，就是颜色不同，日后根据需要可以添加更多的样式，这里只是一个例子供大家参考，
当你完成上面的工作后，就可以运行了，本文只是很简单的演示换肤的，您可以下载源代码：
点击下载源代码

上一条：JaveScript中的几个关键概念的理解-原型链的构建-javascript技巧 下一条:Javascript中正则表达式的全局匹配模式分析-javascript技巧

jQuery之网页换肤实现代码-jquery

相关文章

最新文章