zoukankan      html  css  js  c++  java
  • 网页换肤效果 系统界面切换皮肤样式

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


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

    <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

  • 相关阅读:
    vue-awesome-swiper-T 轮播图
    transition-T 手机端滑动验证
    VUE-T
    跨域配置-Access-Control-Allow-Origin
    HTML中CSS引入图片并铺满背景
    mysql_affected_rows()、mysql_fetch_row、mysql_fetch_assoc
    tp框架的四种路由方式
    sql注入
    禁用cookie,怎么获得session
    git解决冲突的方法
  • 原文地址:https://www.cnblogs.com/leshao/p/5985715.html
Copyright © 2011-2022 走看看