网页换肤效果 系统界面切换皮肤样式
Posted 乐少007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页换肤效果 系统界面切换皮肤样式相关的知识，希望对你有一定的参考价值。
近期需要整理后台系统的界面皮肤样式。就是看一种风格样式习惯了，想换点别的样式界面
思考了一段时间，开始想偏了，想直接在现有样式直接修改。比如：红色，绿色。
思考后，还是写两套皮肤样式，进行切换吧。
默认加载原有的样式文件，点击按钮，切换对应的即可。不必修改结构，直接修改不同的样式属性。
以下为 核心代码片段
<link id="skinStyle" href="../styles/style.css" type="text/css" rel="stylesheet" />
</head>
<script>
$(function() {
var oSkinStyle = $("#skinStyle");
var aSkin = $("#skin > li");
var arr = ["../styles/style.css", "../styles/style-black.css"];
for(var i = 0; i < aSkin.length; i++) {
(function(index) {
aSkin.eq(index).on("click", function() {
oSkinStyle.attr("href", arr[index]);
});
})(i);
}
});
</script>
<body>
<ul id="skin">
<li id="red" title="红色" class="current">红</li>
<li id="black" title="黑色" class="">黑</li>
</ul>
</BODY>
</html>
默认加载原有的style.css。当点击按钮切换，进行选择style-black.css即可
参考网络资源：http://fgm.cc/learn/lesson1/02.html
多谢lost，阳仔完善……
下载地址http://files.cnblogs.com/files/leshao/skin-peeler.rar
以上是关于网页换肤效果 系统界面切换皮肤样式的主要内容，如果未能解决你的问题，请参考以下文章