如何给网站添加更换皮肤配色功能

网站上经常会有这样的功能，可以让用户点击对应的颜色来对网站进行配色调整。也就是我们所说的更换配色功能。下面介绍一下如何给网站添加更换皮肤配色功能。

方法/步骤

第一步：添加一个jquery 缓存Cookie插件 jquery.cookie.js；将以下的代码放在网页的</head>标签上方；

<script src="js/jquery.cookie.js" type="text/javascript"></script>

第二步：在头部文件上面，添加一个默认的CSS文件；

<link href="css/default.css" rel="stylesheet" type="text/css" id="cssfile" />

第三步：在头部文件添加以下的JS代码，用于配色的切换以及COOKIE的写入；

<script type="text/javascript">

//<![CDATA[

$(function(){

var $li =$("#skin a");

$li.click(function(){

switchSkin( this.id );

});

var cookie_skin = $.cookie( "MyCssSkin");

if (cookie_skin) {

switchSkin( cookie_skin );

}

});

function switchSkin(skinName){

$("#"+skinName).addClass("selected").siblings().removeClass("selected");

//当前<li>元素选中

//去掉其它同辈<li>元素的选中

$("#cssfile").attr("href","css/"+ skinName +".css");

//设置不同皮肤

$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });

}

//]]>

</script>

第四步：制作配色切换按钮；

<div class="bt-yf"><a href="javascript:void(0);" id="yifu" class="bt-btn-yf" title="换肤">换肤</a></div>

添加按钮的CSS样式：

.bt-btn-yf{display:block;width:38px;height:38px;background:#bababa url(../images/yf.png) no-repeat 50% 50%;position:fixed;z-index:9999;right:10px;bottom:20%;background-size:80% 80%;margin-top:5px;}

.show-yf{display:none;position:fixed;right:10px;top:50%;width:50px;z-index:999;text-align:center;}

.show-yf a{display:block;padding:10px 0;height:60px;line-height:40px;}

.qey{background:#fff;color:#333}

.sey{background:#333;color:#fff;}



@media (max-width:767px){

.show-yf{right:10px;top:40%;width:30px;z-index:999;text-align:center;}

.show-yf a{display:block;padding:10px 0;height:60px;line-height:40px;}

}

第五步：在网页最底部添加以下的代码；

<div class="show-yf" id="skin">

<a href="javascript:;" id="white" class="qey" title="浅色">浅色</a>

<a href="javascript:;" id="black" class="sey" title="深色">深色</a>

</div>

<script>

$("#yifu").click(

function(){

$(".show-yf").slideToggle();

});

</script>

这样，一个网站的皮肤切换功能就制作好了。这里需要注意每个代码里的文件路径要修改正确。并且要添加以下几个文件：

1. jquery.cookie.js：Cookies插件
2. default.css：默认的CSS，内容可以为空
3. black.css：深色皮肤下网站各个元素的样式
4. white.css：浅色皮肤下网站各个元素的样式