SCLUB免費論壇申請-使用者論壇's Archiver

无界 發表於 2019-8-14 20:43

仿115主题,免刷新切换背景。不设隐藏

[attach]79864[/attach]

1、在默认模板套系新建模板命名为  set_body  内容是[code]$jq(document).ready(function(){
    var cookieClass = getCookie('class');
        $jq("body").attr("class",cookieClass);
        $jq(".q_qiehuan_menu span").each(function(){
            $jq(this).click(function(){                                                     
                var className=$jq(this).attr("class");
                $jq("body").attr("class",className,30);
                function SetCookie(name,value,day){
                    var exp  = new Date();
                    exp.setTime(exp.getTime() + day*24*60*60*1000);
                    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
                }
                SetCookie("class",className,30);
            })
        });
});
function getCookie(name){
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
}[/code]2、在header模板里找到[code]<div id="header">[/code]在上边加[code]<div id="change_theme_btn_menu" class="q_qiehuan_menu" style="display: none;">
<h2 class="dialog-title">
<a class="dialog-handle" href="javascript:void(0)" onclick="qout()"></a>
</h2>
<div style="padding:15px 0 0 0;">
<span class="Sunset_glow"><img src="背景1小图标"><em>Sunset_glow</em></span>
<span class="Snow"><img src="背景2小图标"><em>Snow</em></span>
<span class="NewYear"><img src="背景3小图标"><em>NewYear</em></span>
<span class="London"><img src="背景4小图标"><em>London</em></span>
<span class="Flowers"><img src="背景5小图标"><em>Flowers</em></span>
<span class="Wizard"><img src="背景6小图标"><em>Wizard</em></span>
<span class="California"><img src="背景7小图标"><em>California</em></span>
<span class="Cloud"><img src="背景8小图标"><em>Cloud</em></span>
<span class="Sky"><img src="背景9小图标"><em>Sky</em></span>
<span class="Lavender"><img src="背景10小图标"><em>Lavender</em></span>
<span class="City"><img src="背景11小图标"><em>City</em></span>
<span class="Black"><img src="背景12小图标"><em>Black</em></span>
<span class="Beige"><img src="背景13小图标"><em>Beige</em></span>
<span class="Dragon"><img src="背景14小图标"><em>Dragon</em></span>
<span class="minecraf"><img src="背景15小图标"><em>我的世界</em></span>
</div>
</div>
<script>
jQuery(function(){
jQuery('#change_theme_btn').click(function(){
if(!jQuery('#change_theme_btn_menu').is(':visible')){
jQuery('#change_theme_btn_menu').css({display:'block', top:'-100px'}).animate({top: '+100'}, 500);
}
});
});
  function qout(){
  jQuery('#change_theme_btn_menu').animate({top:'-340'}, 500, function(){
  jQuery(this).css({display:'none', top:'-340px'});
});
}
</script>

<div id="a-dayan" class="animate-layer">
<s class="a-bird a-bird-01"></s>
<s class="a-bird a-bird-02"></s>
<s class="a-bird a-bird-03"></s>
<s class="a-bird a-bird-04"></s>
<s class="a-bird a-bird-05"></s>
<s class="a-bird a-bird-06"></s>
</div>
[/code]3、在header模板继续找到[code]<div class="wrap s_clear">[/code]在下边加[code]<a class="q_qiehuan" href="javascript:;" title="切换风格" id="change_theme_btn">切换风格</a>[/code]4、在css_append模板的最下边放入下边代码[code]
body {background: url(默认背景) no-repeat fixed center top #2A333B;background-size: cover;}
.q_qiehuan:hover {
    background: url(切换背景按钮鼠标划入图标) no-repeat 0px -40px;
}

.q_qiehuan {
    position: absolute;
    z-index: 199;
margin-left: 1100px;
    margin-top: 15px;
    width: 40px;
    height: 40px;
    line-height: 20;
    overflow: hidden;
    background: url(切换背景按钮图标) no-repeat 0px 0px;
    transition: none;
border-top-right-radius: 5px;
}
.q_qiehuan_menu h2 {
    position: relative;
    height: 54px;
    margin: 0px;
    padding: 0px 15px;
    line-height: 54px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #EFEFEF;
    background: #FAFAFA url(弹出背景框“换个心情”图片) no-repeat 15px center;
}
.q_qiehuan_menu span {
    width: 98px;
    height: 70px;
    border: 2px solid #fff;
    margin-left: 15px;
    float: left;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
}

.q_qiehuan_menu span:hover {
    width: 98px;
    height: 70px;
    border: 2px solid #2d92dd;
    margn-left: 15px;
    float: left;
    margin-biottom: 15px;
    cursor: pointer;
    position: relative;
}

.q_qiehuan_menu {
    left: 30%;
    width: 600px;
    height: auto;
    border: 1px solid #BCBCBC;
    background: #FFF;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
position: absolute;
    z-index: 5200;
}


.q_qiehuan_menu span:hover  em{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#80000000');
}

.q_qiehuan_menu span em {
    display: none;
}
.Sunset_glow{background: url(背景1) no-repeat fixed center top #0D1722;background-size: cover;}
.Snow{background: url(背景2) no-repeat fixed center top #282062;}
.NewYear{background: url(背景3) no-repeat fixed center top #b3282f;background-size: cover;}
.London{background: url(背景4) no-repeat fixed center top #2A333B;background-size: cover;}
.Flowers{background: url(背景5) no-repeat fixed center top #F5F3F0;}
.Wizard{background: url(背景6) no-repeat fixed center top #5D974D;}
.California{background: url(背景7) repeat-x fixed center bottom transparent;}
.Cloud{background: url(背景8) repeat-x bottom fixed;}
.Sky{background: #0d1722 url(背景9) no-repeat center top fixed;}
.Lavender{background: url(背景10) no-repeat fixed center top #FFF;}
.City{background: url(背景11) repeat-x fixed center top transparent !important;}
.Black{background: url(背景12) repeat fixed 0px 0px #313131;}
.Beige{background: url(背景13) repeat fixed 0px 0px #F7F7DF;}
.Dragon{background: url(背景14) repeat fixed center top #060404;}
.minecraf{background: url(背景15) no-repeat fixed center top #0D1722;background-size: cover;}
.dialog-title {margin-bottom: -30px;position: relative;height: 30px;cursor: move;}
.q_qiehuan_menu a.dialog-handle {
    float: right;
    margin-right: 15px;
    margin-top: 19px;
    width: 16px;
    height: 16px;
    display: inline-block;
    overflow: hidden;
    background: url(关闭按钮);
    background-repeat: no-repeat;
}

.q_qiehuan_menu a.dialog-handle:hover {
    background-position: 0px -16px;
}
.animate-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

.animate-layer:before{
        display:none;
}

.animate-layer:after{
        display:none;
}

.a-bird{
        z-index:-1;
        position:absolute;
        width:120px;
        height:90px;
        background-image:url(大雁);
        background-repeat:no-repeat;
        -webkit-animation:fly 1s linear infinite,forward 30s linear infinite;
        -moz-animation:fly 1s linear infinite,forward 30s linear infinite;
        -ms-animation:fly 1s linear infinite,forward 30s linear infinite;
}

.a-bird-01{
        top:320px;
        left:-3%;
        background-position:0 -540px;
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -ms-transform:scale(0.8);
        -webkit-animation-delay:-0.67s,-26.077s;
        -moz-animation-delay:-0.67s,-26.077s;
        -ms-animation-delay:-0.67s,-26.077s;
        zoom:0.8\9;
}

.a-bird-02{
        top:240px;
        left:4%;
        background-position:0 -360px;
        -webkit-transform:scale(0.6);
        -moz-transform:scale(0.6);
        -ms-transform:scale(0.6);
        -webkit-animation-delay:-0.45s,-24.462s;
        -moz-animation-delay:-0.45s,-24.462s;
        -ms-animation-delay:-0.45s,-24.462s;
        zoom:0.6\9;
}

.a-bird-03{
        top:280px;
        left:12%;
        -webkit-transform:scale(0.7);
        -moz-transform:scale(0.7);
        -ms-transform:scale(0.7);
        -webkit-animation-delay:0s,-22.615s;
        -moz-animation-delay:0s,-22.615s;
        -ms-animation-delay:0s,-22.615s;
        zoom:0.7\9;
}

.a-bird-04{
        top:300px;
        left:85%;
        background-position:0 -630px;
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -ms-transform:scale(0.8);
        -webkit-animation-delay:-0.78s,-5.769s;
        -moz-animation-delay:-0.78s,-5.769s;
        -ms-animation-delay:-0.78s,-5.769s;
        zoom:0.8\9;
}

.a-bird-05{
        top:260px;
        left:93%;
        background-position:0 -270px;
        -webkit-transform:scale(0.7);
        -moz-transform:scale(0.7);
        -ms-transform:scale(0.7);
        -webkit-animation-delay:-0.34s,-3.923s;
        -moz-animation-delay:-0.34s,-3.923s;
        -ms-animation-delay:-0.34s,-3.923s;
        zoom:0.7\9;
}

.a-bird-06{
        top:220px;
        left:79%;
        background-position:0 -450px;
        -webkit-transform:scale(0.6);
        -moz-transform:scale(0.6);
        -ms-transform:scale(0.6);
        -webkit-animation-delay:-0.56s,-7.154s;
        -moz-animation-delay:-0.56s,-7.154s;
        -ms-animation-delay:-0.56s,-7.154s;
        zoom:0.6\9;
}

@-webkit-keyframes fly{
        0%{
                background-position:0 0;
        }

        11.1%{
                background-position:0 0;
        }

        11.11%{
                background-position:0 -90px;
        }

        22.21%{
                background-position:0 -90px;
        }

        22.22%{
                background-position:0 -180px;
        }

        33.32%{
                background-position:0 -180px;
        }

        33.33%{
                background-position:0 -270px;
        }

        44.43%{
                background-position:0 -270px;
        }

        44.44%{
                background-position:0 -360px;
        }

        55.54%{
                background-position:0 -360px;
        }

        55.55%{
                background-position:0 -450px;
        }

        66.65%{
                background-position:0 -450px;
        }

        66.66%{
                background-position:0 -540px;
        }

        77.76%{
                background-position:0 -540px;
        }

        77.77%{
                background-position:0 -630px;
        }

        88.87%{
                background-position:0 -630px;
        }

        88.88%{
                background-position:0 -720px;
        }

        99.98%{
                background-position:0 -720px;
        }

        100%{
                background-position:0 0;
        }

}

@-moz-keyframes fly{
        0%{
                background-position:0 0;
        }

        11.1%{
                background-position:0 0;
        }

        11.11%{
                background-position:0 -90px;
        }

        22.21%{
                background-position:0 -90px;
        }

        22.22%{
                background-position:0 -180px;
        }

        33.32%{
                background-position:0 -180px;
        }

        33.33%{
                background-position:0 -270px;
        }

        44.43%{
                background-position:0 -270px;
        }

        44.44%{
                background-position:0 -360px;
        }

        55.54%{
                background-position:0 -360px;
        }

        55.55%{
                background-position:0 -450px;
        }

        66.65%{
                background-position:0 -450px;
        }

        66.66%{
                background-position:0 -540px;
        }

        77.76%{
                background-position:0 -540px;
        }

        77.77%{
                background-position:0 -630px;
        }

        88.87%{
                background-position:0 -630px;
        }

        88.88%{
                background-position:0 -720px;
        }

        99.98%{
                background-position:0 -720px;
        }

        100%{
                background-position:0 0;
        }

}

@-ms-keyframes fly{
        0%{
                background-position:0 0;
        }

        11.1%{
                background-position:0 0;
        }

        11.11%{
                background-position:0 -90px;
        }

        22.21%{
                background-position:0 -90px;
        }

        22.22%{
                background-position:0 -180px;
        }

        33.32%{
                background-position:0 -180px;
        }

        33.33%{
                background-position:0 -270px;
        }

        44.43%{
                background-position:0 -270px;
        }

        44.44%{
                background-position:0 -360px;
        }

        55.54%{
                background-position:0 -360px;
        }

        55.55%{
                background-position:0 -450px;
        }

        66.65%{
                background-position:0 -450px;
        }

        66.66%{
                background-position:0 -540px;
        }

        77.76%{
                background-position:0 -540px;
        }

        77.77%{
                background-position:0 -630px;
        }

        88.87%{
                background-position:0 -630px;
        }

        88.88%{
                background-position:0 -720px;
        }

        99.98%{
                background-position:0 -720px;
        }

        100%{
                background-position:0 0;
        }

}

@-webkit-keyframes forward{
        0%{
                left:110%;
        }

        100%{
                left:-20%;
        }

}

@-moz-keyframes forward{
        0%{
                left:110%;
        }

        100%{
                left:-20%;
        }

}

@-ms-keyframes forward{
        0%{
                left:110%;
        }

        100%{
                left:-20%;
        }

}
[/code]5、在第三方放入代码[code]<script type="text/javascript" src="templates/default/set_body.htm"></script>[/code]6、在其他头部放入代码[code]
<script src="http://icode.258club.com/templates/colors/jquery_331.htm"></script>
<script src="http://icode.258club.com/templates/colors/d_move.htm"></script>
[/code]注:已经安装了jq库的请忽略第6步。

无界 發表於 2019-8-14 20:50

图片素材在这里

無名. 發表於 2019-8-14 21:22

沙发{:13_599:}支持一下{:13_595:}

4rphotoclub 發表於 2019-8-15 01:13

支持一定支持~

网雨霏霏 發表於 2019-8-15 11:14

支持。非常感谢楼主的无私分享

beatpop 發表於 2019-8-17 08:52

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=299849&ptid=35635]2#[/url] [i]无界[/i] [/b]


[b][color=Red]我按照你的方法去做,发现这个切换图标位置有问题。
跑到挡住了登陆位置,
[/color][/b]


[attach]79901[/attach]

BoneI 發表於 2019-8-17 22:37

你还在啊 给个群号? 我加一下

macheng 發表於 2019-8-22 16:55

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=299856&ptid=35635]5#[/url] [i]网雨霏霏[/i] [/b]


    拉我进一下无界的微信群

网雨霏霏 發表於 2019-8-23 07:31

[i=s] 本帖最後由 网雨霏霏 於 2019-8-23 07:33 編輯 [/i]

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=299992&ptid=35635]8#[/url] [i]macheng[/i] [/b]


    你直接联系他吧。我讨厌用微信【因为不喜欢它的东家】,故此没有加群

况且,我俩并不是微信好友,根本无从下手。

无界 發表於 2019-8-23 10:12

[b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=299992&ptid=35635]8#[/url] [i]macheng[/i] [/b]

[attach]79939[/attach]

頁: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.