码迷,mamicode.com
首页 > Web开发 > 详细

网页换肤效果 系统界面切换皮肤样式

时间:2016-10-21 19:50:35      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:blog   需要   images   html   结构   http   网络   界面切换   效果   

近期需要整理后台系统的界面皮肤样式。就是看一种风格样式习惯了,想换点别的样式界面
思考了一段时间,开始想偏了,想直接在现有样式直接修改。比如:红色,绿色。
思考后,还是写两套皮肤样式,进行切换吧。

 

技术分享

 


默认加载原有的样式文件,点击按钮,切换对应的即可。不必修改结构,直接修改不同的样式属性。
以下为 核心代码片段

<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

网页换肤效果 系统界面切换皮肤样式

标签:blog   需要   images   html   结构   http   网络   界面切换   效果   

原文地址:http://www.cnblogs.com/leshao/p/5985715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!