JQuery/PHP
Jquery 给网站添加更换皮肤配色一键换色功能
PetitQ
收藏
网站上经常会有这样的功能，可以让用户点击对应的颜色来对网站进行配色调整。也就是我们所说的更换配色功能。下面介绍一下如何给网站添加更换皮肤配色功能。
section
添加一个 jquery 缓存 Cookie 插件 jquery.cookie.js；将以下的代码放在网页的</head>标签上方；
也想出现在这里？联系我们吧
section
在头部文件上面，添加一个默认的 CSS 文件；
<link href="css/default.css" rel="stylesheet" type="text/css" id="cssfile" />
section
在头部文件添加以下的 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>
section
制作配色切换按钮；
<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;}
}
section
在网页最底部添加以下的代码；
<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>
这样，一个网站的皮肤切换功能就制作好了。这里需要注意每个代码里的文件路径要修改正确。并且要添加以下几个文件：
jquery.cookie.js：Cookies 插件
default.css：默认的 CSS，内容可以为空
black.css：深色皮肤下网站各个元素的样式
white.css：浅色皮肤下网站各个元素的样式
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
