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

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

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

<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

时间: 2024-10-10 16:35:14

网页换肤效果 系统界面切换皮肤样式的相关文章

网页换肤效果的实现原理

效果原理: 准备几套CSS样式表 调式好每个CSS样式表的兼容性 在点击按钮时,改变link中href的值(js获取link标签,通过js改变href的值,link也可以给其id) HTML和js: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

js实现换肤效果

一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

很简单的JQuery网页换肤

现在介绍网页换肤的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下.效果很简单,我就直接讲怎么使用的. 其中用到了jquery.cookie.js 首先是html代码: <div id="header_demo"> <a id="logo" href="#">Rainweb</a> <ul id="skin"&

WPF换肤之四:界面设计和代码设计分离

原文:WPF换肤之四:界面设计和代码设计分离 说起WPF来,除了总所周知的图形处理核心的变化外,和Winform比起来,还有一个巨大的变革,那就是真正意义上做到了界面设计和代码设计的分离.这样可以让美工和程序分开进行,而不是糅合在一块,这样做的好处当然也是显而易见的:提高了开发效率. 原先的设计方式 在我们之前设计的代码中,每当添加一个新的窗体的时候,我总是会在这个新的窗体的XAML文件中加入如下的代码,以便使样式能够应用上去: <Window x:Class="WpfApplicatio

【转】Javascript+css 实现网页换肤功能

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

作品第一课----网页换肤

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页换肤</title> <style type="text/css"> body, html { height: 100%; } body { margin:0; } li { list-style: none;width:

网页换肤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

1-2 网页换肤

网页换肤,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html"> <title>网页换肤</title> <style> body, ul,li

JS实现网页换肤功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实现网页换肤功能 -石家庄花卉出租 </ti