JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能

news2024/9/19 10:40:27

切换样式表可能有人不理解，但说到网站换肤，大概率就很多人都明白了。因为它是很多网站都已经有的功能了，最常见的就是很多网站的关灯模式。本文，就给大家分享一个我自己网站上使用的样式表切换的方案。

案例效果

目录结构

文件准备

JQ文件

准备jquery文件，因为我们要修改cookie，所以...

jquery-3.5.1.js

jquery.cookie.js

样式表

我们新建了一个文件夹叫做“CSS换肤小demo”，准备了7个CSS文件在里面。

其中，默认样式我们存放在default.css 中。其他6个样式表文件，都简单的写了两行样式表，为了演示换肤功能，只对页面背景色和h1标题的前景色进行了改变。

/* 准备换的样式表 */
body{ background: #xxx; } 
h1{ color: #xxxxxx; }

默认样式表default.css 的代码如下：

*{
    margin:0;
    padding: 0;
}
ul li{
    list-style-type: none;
}

.container{
  /* 居中 */
  position: fixed;  
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%); 
  width:50%;
}

h1{
    margin: 20px 0px;
    text-align: left;    
}
#skin li{   
    padding-left: 30px;
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
}
li::after{
    cursor: pointer;
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    padding:3px; 
    top:0px;
    left: 0px;
    background: #999;
    border:2px solid #fff;
    border-radius: 10px;
    transition: all .5s; /* 按钮响应动画效果的持续时间 */
}

.skin_0::after{ background: #ddd; }
.skin_1::after{ background: #cc80ff; }
.skin_2::after{ background: #ff8080; }
.skin_3::after{ background: #66d9ff; }
.skin_4::after{ background: #ff884d; }
.skin_5::after{ background: #99ff66; }

li:hover::after{
    border-radius: 5px;
    transition: all .5s; /* 按钮响应动画效果的持续时间 */
}
.selected::after{     
    color:#fff;
    content: '✔';
}

HTML结构

在head标签内引用样式表文件和JQ文件：

/* 样式表文件 */
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

<!--   引入jQuery -->
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<!--   引入jQuery.cookie库 -->
<script src="jquery.cookie.js" type="text/javascript"></script>

这里要注意引用顺序。

在body标签内构造列表

<div class="container">
        <h1>选择颜色</h1>
        <ul id="skin">
            <li id="skin_0" class="skin_0 selected" title="灰色" ></li>
            <li id="skin_1" class="skin_1" title="紫色"></li>
            <li id="skin_2" class="skin_2" title="红色"></li>
            <li id="skin_3" class="skin_3" title="蓝色"></li>
            <li id="skin_4" class="skin_4" title="橙色"></li>
            <li id="skin_5" class="skin_5" title="绿色"></li>
        </ul>     
    </div>

使用了有序列表来呈现用户选择的标签，用它模拟option效果。

切换样式表的JS

 //<![CDATA[
    $(function(){
        var $li =$("#skin li");
        $li.click(function(){
            switchSkin( this.id );
        });
        var cookie_skin = $.cookie( "MyCssSkin");
        if (cookie_skin) {
            switchSkin( cookie_skin );
        }
    });
    function switchSkin(skinName){
        //当前<li>元素选中
        $("#"+skinName).addClass("selected").siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
            $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
            $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 }); // 记录css样式表名，并设置过期时间。
    }
    //]]>

我们看一下调试：