仿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步。 图片素材在这里 沙发{:13_599:}支持一下{:13_595:} 支持一定支持~ 支持。非常感谢楼主的无私分享 [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] 你还在啊 给个群号? 我加一下 [b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=299856&ptid=35635]5#[/url] [i]网雨霏霏[/i] [/b]
拉我进一下无界的微信群 [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]
你直接联系他吧。我讨厌用微信【因为不喜欢它的东家】,故此没有加群
况且,我俩并不是微信好友,根本无从下手。 [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]