实现网页换肤功能方法详解
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 以前我们会经常看到有网站具备网页换肤功能了，今天我来介绍如何实现网页换肤吧，这里主要是利用css+js的cookie来操作，下面我给大家详细介绍。...
|
网页换肤事先需要的准备
首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：
下面我们就来看具体功能代码。
实现点击切换对应 CSS 功能
首先，我们的皮肤选项的 HTML 结构是这样的
| 代码如下 |
复制代码 |
|
<div class="skin">
<ul>
<li class="skin1 hover"></li>
<li class="skin2"></li>
<li class="skin3"></li>
<li class="skin4"></li>
</ul>
</div>
|
然后在网页的顶部偏下的位置放上一个空的 link 标签，我们将会使用 jQuery 为这个 link 标签赋予不同的 CSS 文件实现切换效果
| 代码如下 |
复制代码 |
| <link rel="stylesheet" href="" data-href="style-Teal.css" type="text/css" media="screen" class="skincsslittle" /> |
其中，我自定义了一个 data-href 属性来存放系统默认的皮肤，这样当页面加载完成之后，如果 JS 没有检测到 Cookie 中的皮肤信息，就会把 data-href 中的内容赋值上去。之后就是大家熟悉的 jQuery 代码：
| 代码如下 |
复制代码 |
|
jQuery('.skin li').click(function(){
var currentClass = jQuery(this).attr('class');
jQuery(this).siblings().removeClass('hover');
jQuery(this).addClass('hover');
var cc = currentClass.substring(0,5);
cc = convertcsslittle(cc);
var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + cc;
jQuery('.skincsslittle').attr("href",skincssurl);
createCookie('skin',currentClass,365);
});
|
大体的逻辑就是获取到当前皮肤的 class 然后截取出来 skin* 然后通过一个函数得到其对应的 CSS 文件。skincssurl 记载的是网页的非皮肤 CSS 文件，主要用来获取当前网页的 CSS 目录 URL ，最后将混合好的 CSS 皮肤文件赋值准备好的空 link 中，实现换肤。
增加 Cookie 记录皮肤功能
这里主要用到两个自定义的函数，用来创建、读取 Cookie 内容。
| 代码如下 |
复制代码 |
|
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return false;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
|
你只需要把这两个函数复制到 JS 代码区域即可。在 jQuery 点击换肤的功能代码中，最后一句就创建了一个 Cookie，等网页加载完成之后，我们需要使用 JS 读取 Cookie 内容，然后使用 if 判断：
| 代码如下 |
复制代码 |
|
var cccc = readCookie("skin");
if (cccc){
cccc = cccc.substring(0,5);
jQuery('.'+cccc).addClass('hover').siblings().removeClass('hover');
ccc = convertcsslittle(cccc);
var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + ccc;
jQuery('.skincsslittle').attr("href",skincssurl);
}else{
var currentcss = jQuery('.skincsslittle').attr("data-href");
var currentcssname = currentcss.substring(currentcss.indexOf('style'),currentcss.length);
currentcssname = defaulttoclass(currentcssname);
jQuery('.'+currentcssname).addClass('hover').siblings().removeClass('hover');
jQuery('.skincsslittle').attr("href",jQuery('.skincsslittle').attr("data-href"));
}
|
要被这么乱的代码吓晕了，实际上逻辑很简单，先获取 Cookie 的皮肤值，如果有就为对应的皮肤选项高亮并且转换得到对应的 CSS 皮肤文件赋值。如果没有 Cookie 内容，就将 data-href 属性中记录的值赋值进去。 |
