localStorage浏览器换肤

最新推荐文章于 2022-02-26 20:52:54 发布

郭浩326

最新推荐文章于 2022-02-26 20:52:54 发布

阅读量650

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/guohao326/article/details/76153076

jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种基于HTML、CSS及jQuery实现的网页换肤功能。通过点击按钮展示不同的主题选项，用户可以选择喜欢的主题背景，点击确定后页面背景将切换为所选主题样式。文章详细展示了如何使用渐变背景来丰富视觉效果，并提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: #f38d1d;
        }
        #skinBg{

        }
        .motif-first,.s-first{
            background: -webkit-linear-gradient(#4eccc3, #4ca1cc);
            background: -o-linear-gradient(#4eccc3, #4ca1cc);
            background: -moz-linear-gradient(#4eccc3, #4ca1cc);
            background: linear-gradient(#4eccc3, #4ca1cc);
        }
        .motif-second,.s-second{
            background: -webkit-linear-gradient(#67b16f, #4ca1cc);
            background: -o-linear-gradient(#67b16f, #4ca1cc);
            background: -moz-linear-gradient(#67b16f, #4ca1cc);
            background: linear-gradient(#67b16f, #4ca1cc);
        }
        .motif-third,.s-third{
            background: -webkit-linear-gradient(#dd6161, #2657ea);
            background: -o-linear-gradient(#dd6161, #2657ea);
            background: -moz-linear-gradient(#dd6161, #2657ea);
            background: linear-gradient(#dd6161, #2657ea);
        }
        .motif-four,.s-four{
            background: -webkit-linear-gradient(#8d0e00, #1f1c18);
            background: -o-linear-gradient(#8d0e00, #1f1c18);
            background: -moz-linear-gradient(#8d0e00, #1f1c18);
            background: linear-gradient(#8d0e00, #1f1c18);
        }
        .motif-five,.s-five{
            background: -webkit-linear-gradient(#1d4350, #a33931);
            background: -o-linear-gradient(#1d4350, #a33931);
            background: -moz-linear-gradient(#1d4350, #a33931);
            background: linear-gradient(#1d4350, #a33931);
        }
        .motif-six,.s-six{
            background: -webkit-linear-gradient(#0b486b, #f46217);
            background: -o-linear-gradient(#0b486b, #f46217);
            background: -moz-linear-gradient(#0b486b, #f46217);
            background: linear-gradient(#0b486b, #f46217);
        }
        .motif-seven,.s-seven{
            background: -webkit-linear-gradient(#3a7bd4, #3a6073);
            background: -o-linear-gradient(#3a7bd4, #3a6073);
            background: -moz-linear-gradient(#3a7bd4, #3a6073);
            background: linear-gradient(#3a7bd4, #3a6073);
        }
        .motif-eight,.s-eight{
            background: -webkit-linear-gradient(#3a6185, #88253e);
            background: -o-linear-gradient(#3a6185, #88253e);
            background: -moz-linear-gradient(#3a6185, #88253e);
            background: linear-gradient(#3a6185, #88253e);
        }
        #skinBg{
            height: 300px;
        }
        .skin-model{
            display: none;
        }
        .motif>div,.skin-button a{
            cursor: pointer;
        }
        .motif>div{
            float: left;
            width: 100px;
            height: 30px;
        }
    </style>
</head>
<body>

<div id="skinBg">
        <div class="global-control">
            <button class="global-item" id="skinBtn">换肤 </button>
        </div>
</div>
<div class="skin-model">
    <div class="motif">
        <div class="s-first"  data-theme="motif-first">主题一</div>
        <div class="s-second"  data-theme="motif-second">主题二</div>
        <div class="s-third" data-theme="motif-third">主题三</div>
        <div class="s-four" data-theme="motif-four">主题四</div>
        <div class="s-five" data-theme="motif-five">主题五</div>
        <div class="s-six" data-theme="motif-six">主题六</div>
        <div class="s-seven" data-theme="motif-seven">主题七</div>
        <div class="s-eight" data-theme="motif-eight">主题八</div>
    </div>

    <div class="b-rlv">
        <div class="skin-button">
            <a onclick="skinOkay()" class="okay"><b>确定</b></a>
            <a onclick="skinClose()" class="cancel"><b>取消</b></a>
        </div>
    </div>


</div>
</body>
<script>
    //显示主题模态框
    $(function(){
        var theme_=localStorage.getItem("skinmodelArr");
        if(theme_){
            $("#skinBg").removeClass().addClass("index-bg "+theme_);
        }
        //获取当前皮肤
        $(function(){
            initial = $("#skinBg").attr("class");
            localStorage.setItem("skinOriginal",initial);
        });
        //显示主题模态框
        $("#skinBtn").click(function(){
            // $("#skinBg").toggleClass("skin-bg2");
            $(".skin-model").slideToggle("slow");
        })
    })
    //选择主题皮肤
    $(function(){
        $('.skin-model .motif > div').click(function(){
            theme = $(this).data('theme');
            $("#skinBg").removeClass().addClass("index-bg "+theme);
        })
    })
    //皮肤确认
    function skinOkay(){
        localStorage.setItem("skinmodelArr",theme)
        var theme_=localStorage.getItem("skinmodelArr");
        if(theme_){
            $("#skinBg").removeClass().addClass("index-bg "+theme_);
        }
        $(".skin-model").slideToggle("slow");
    }

    /*隐藏皮肤框*/

    function skinClose(){
        var initial_=localStorage.getItem("skinOriginal");
        if(initial_){
            $("#skinBg").removeClass().addClass(initial);
        }
        $(".skin-model").slideToggle("slow");
    }
</script>
</html>