网站上经常会有这样的功能，可以让用户点击对应的颜色来对网站进行配色调整。也就是我们所说的更换配色功能。下面介绍一下如何给网站添加更换皮肤配色功能。
方法/步骤
第一步：添加一个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>
//<![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;}
.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>
<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：浅色皮肤下网站各个元素的样式
免责声明：网所有文字、图片、视频、音频等资料均来自互联网，不代表本站赞同其观点，内容仅提供用户参考，若因此产生任何纠纷，本站概不负责，如有侵权联系本站删除！邮箱:207985384@qq.com https://www.ainiseo.com/jianzhan/60979.html
