[教學] 仿115主题，免刷新切换背景。不设隐藏

无界

下載 (1.93 MB)

2019-8-14 20:03

1、在默认模板套系新建模板命名为  set_body  内容是

1. $jq(document).ready(function(){
   
2.     var cookieClass = getCookie('class');
   
3.         $jq("body").attr("class",cookieClass);
   
4.         $jq(".q_qiehuan_menu span").each(function(){
   
5.             $jq(this).click(function(){                                                     
   
6.                 var className=$jq(this).attr("class");
   
7.                 $jq("body").attr("class",className,30);
   
8.                 function SetCookie(name,value,day){
   
9.                     var exp  = new Date();
   
10.                     exp.setTime(exp.getTime() + day*24*60*60*1000);
    
11.                     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    
12.                 }
    
13.                 SetCookie("class",className,30);
    
14.             })
    
15.         });
    
16. });
    
17. function getCookie(name){
    
18.     var nameEQ = name + "=";
    
19.     var ca = document.cookie.split(';');
    
20.         for(var i=0;i < ca.length;i++) {
    
21.             var c = ca[i];
    
22.             while (c.charAt(0)==' ') c = c.substring(1,c.length);
    
23.             if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    
24.         }
    
25.         return null;
    
26. }

複製代碼

2、在header模板里找到

1. <div id="header">

複製代碼

在上边加

1. <div id="change_theme_btn_menu" class="q_qiehuan_menu" style="display: none;">
   
2. <h2 class="dialog-title">
   
3. <a class="dialog-handle" href="javascript:void(0)" onclick="qout()"></a>
   
4. </h2>
   
5. <div style="padding:15px 0 0 0;">
   
6. <span class="Sunset_glow"><img src="背景1小图标"><em>Sunset_glow</em></span>
   
7. <span class="Snow"><img src="背景2小图标"><em>Snow</em></span>
   
8. <span class="NewYear"><img src="背景3小图标"><em>NewYear</em></span>
   
9. <span class="London"><img src="背景4小图标"><em>London</em></span>
   
10. <span class="Flowers"><img src="背景5小图标"><em>Flowers</em></span>
    
11. <span class="Wizard"><img src="背景6小图标"><em>Wizard</em></span>
    
12. <span class="California"><img src="背景7小图标"><em>California</em></span>
    
13. <span class="Cloud"><img src="背景8小图标"><em>Cloud</em></span>
    
14. <span class="Sky"><img src="背景9小图标"><em>Sky</em></span>
    
15. <span class="Lavender"><img src="背景10小图标"><em>Lavender</em></span>
    
16. <span class="City"><img src="背景11小图标"><em>City</em></span>
    
17. <span class="Black"><img src="背景12小图标"><em>Black</em></span>
    
18. <span class="Beige"><img src="背景13小图标"><em>Beige</em></span>
    
19. <span class="Dragon"><img src="背景14小图标"><em>Dragon</em></span>
    
20. <span class="minecraf"><img src="背景15小图标"><em>我的世界</em></span>
    
21. </div>
    
22. </div>
    
23. <script>
    
24. jQuery(function(){
    
25. jQuery('#change_theme_btn').click(function(){
    
26. if(!jQuery('#change_theme_btn_menu').is(':visible')){
    
27. jQuery('#change_theme_btn_menu').css({display:'block', top:'-100px'}).animate({top: '+100'}, 500);
    
28. }
    
29. });
    
30. });
    
31.   function qout(){
    
32.   jQuery('#change_theme_btn_menu').animate({top:'-340'}, 500, function(){
    
33.   jQuery(this).css({display:'none', top:'-340px'});
    
34. });
    
35. }
    
36. </script>
    
37. 
    
38. <div id="a-dayan" class="animate-layer">
    
39. <s class="a-bird a-bird-01"></s>
    
40. <s class="a-bird a-bird-02"></s>
    
41. <s class="a-bird a-bird-03"></s>
    
42. <s class="a-bird a-bird-04"></s>
    
43. <s class="a-bird a-bird-05"></s>
    
44. <s class="a-bird a-bird-06"></s>
    
45. </div>

複製代碼

3、在header模板继续找到

1. <div class="wrap s_clear">

複製代碼

在下边加

1. <a class="q_qiehuan" href="javascript:;" title="切换风格" id="change_theme_btn">切换风格</a>

複製代碼

4、在css_append模板的最下边放入下边代码

1. body {background: url(默认背景) no-repeat fixed center top #2A333B;background-size: cover;}
   
2. .q_qiehuan:hover {
   
3.     background: url(切换背景按钮鼠标划入图标) no-repeat 0px -40px;
   
4. }
   
5. 
   
6. .q_qiehuan {
   
7.     position: absolute;
   
8.     z-index: 199;
   
9. margin-left: 1100px;
   
10.     margin-top: 15px;
    
11.     width: 40px;
    
12.     height: 40px;
    
13.     line-height: 20;
    
14.     overflow: hidden;
    
15.     background: url(切换背景按钮图标) no-repeat 0px 0px;
    
16.     transition: none;
    
17. border-top-right-radius: 5px;
    
18. }
    
19. .q_qiehuan_menu h2 {
    
20.     position: relative;
    
21.     height: 54px;
    
22.     margin: 0px;
    
23.     padding: 0px 15px;
    
24.     line-height: 54px;
    
25.     font-size: 16px;
    
26.     font-weight: bold;
    
27.     color: #333;
    
28.     border-bottom: 1px solid #EFEFEF;
    
29.     background: #FAFAFA url(弹出背景框“换个心情”图片) no-repeat 15px center;
    
30. }
    
31. .q_qiehuan_menu span {
    
32.     width: 98px;
    
33.     height: 70px;
    
34.     border: 2px solid #fff;
    
35.     margin-left: 15px;
    
36.     float: left;
    
37.     margin-bottom: 15px;
    
38.     cursor: pointer;
    
39.     position: relative;
    
40. }
    
41. 
    
42. .q_qiehuan_menu span:hover {
    
43.     width: 98px;
    
44.     height: 70px;
    
45.     border: 2px solid #2d92dd;
    
46.     margn-left: 15px;
    
47.     float: left;
    
48.     margin-biottom: 15px;
    
49.     cursor: pointer;
    
50.     position: relative;
    
51. }
    
52. 
    
53. .q_qiehuan_menu {
    
54.     left: 30%;
    
55.     width: 600px;
    
56.     height: auto;
    
57.     border: 1px solid #BCBCBC;
    
58.     background: #FFF;
    
59.     box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
    
60. position: absolute;
    
61.     z-index: 5200;
    
62. }
    
63. 
    
64. 
    
65. .q_qiehuan_menu span:hover  em{
    
66.     display: block;
    
67.     position: absolute;
    
68.     bottom: 0;
    
69.     left: 0;
    
70.     width: 98px;
    
71.     height: 24px;
    
72.     line-height: 24px;
    
73.     text-align: center;
    
74.     font-size: 12px;
    
75.     color: white;
    
76.     background-color: rgba(0,0,0,0.5);
    
77.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#80000000');
    
78. }
    
79. 
    
80. .q_qiehuan_menu span em {
    
81.     display: none;
    
82. }
    
83. .Sunset_glow{background: url(背景1) no-repeat fixed center top #0D1722;background-size: cover;}
    
84. .Snow{background: url(背景2) no-repeat fixed center top #282062;}
    
85. .NewYear{background: url(背景3) no-repeat fixed center top #b3282f;background-size: cover;}
    
86. .London{background: url(背景4) no-repeat fixed center top #2A333B;background-size: cover;}
    
87. .Flowers{background: url(背景5) no-repeat fixed center top #F5F3F0;}
    
88. .Wizard{background: url(背景6) no-repeat fixed center top #5D974D;}
    
89. .California{background: url(背景7) repeat-x fixed center bottom transparent;}
    
90. .Cloud{background: url(背景8) repeat-x bottom fixed;}
    
91. .Sky{background: #0d1722 url(背景9) no-repeat center top fixed;}
    
92. .Lavender{background: url(背景10) no-repeat fixed center top #FFF;}
    
93. .City{background: url(背景11) repeat-x fixed center top transparent !important;}
    
94. .Black{background: url(背景12) repeat fixed 0px 0px #313131;}
    
95. .Beige{background: url(背景13) repeat fixed 0px 0px #F7F7DF;}
    
96. .Dragon{background: url(背景14) repeat fixed center top #060404;}
    
97. .minecraf{background: url(背景15) no-repeat fixed center top #0D1722;background-size: cover;}
    
98. .dialog-title {margin-bottom: -30px;position: relative;height: 30px;cursor: move;}
    
99. .q_qiehuan_menu a.dialog-handle {
    
100.     float: right;
     
101.     margin-right: 15px;
     
102.     margin-top: 19px;
     
103.     width: 16px;
     
104.     height: 16px;
     
105.     display: inline-block;
     
106.     overflow: hidden;
     
107.     background: url(关闭按钮);
     
108.     background-repeat: no-repeat;
     
109. }
     
110. 
     
111. .q_qiehuan_menu a.dialog-handle:hover {
     
112.     background-position: 0px -16px;
     
113. }
     
114. .animate-layer {
     
115.     position: fixed;
     
116.     top: 0;
     
117.     right: 0;
     
118.     bottom: 0;
     
119.     left: 0;
     
120.     overflow: hidden;
     
121.     z-index: -1;
     
122. }
     
123. 
     
124. .animate-layer:before{
     
125.         display:none;
     
126. }
     
127. 
     
128. .animate-layer:after{
     
129.         display:none;
     
130. }
     
131. 
     
132. .a-bird{
     
133.         z-index:-1;
     
134.         position:absolute;
     
135.         width:120px;
     
136.         height:90px;
     
137.         background-image:url(大雁);
     
138.         background-repeat:no-repeat;
     
139.         -webkit-animation:fly 1s linear infinite,forward 30s linear infinite;
     
140.         -moz-animation:fly 1s linear infinite,forward 30s linear infinite;
     
141.         -ms-animation:fly 1s linear infinite,forward 30s linear infinite;
     
142. }
     
143. 
     
144. .a-bird-01{
     
145.         top:320px;
     
146.         left:-3%;
     
147.         background-position:0 -540px;
     
148.         -webkit-transform:scale(0.8);
     
149.         -moz-transform:scale(0.8);
     
150.         -ms-transform:scale(0.8);
     
151.         -webkit-animation-delay:-0.67s,-26.077s;
     
152.         -moz-animation-delay:-0.67s,-26.077s;
     
153.         -ms-animation-delay:-0.67s,-26.077s;
     
154.         zoom:0.8\9;
     
155. }
     
156. 
     
157. .a-bird-02{
     
158.         top:240px;
     
159.         left:4%;
     
160.         background-position:0 -360px;
     
161.         -webkit-transform:scale(0.6);
     
162.         -moz-transform:scale(0.6);
     
163.         -ms-transform:scale(0.6);
     
164.         -webkit-animation-delay:-0.45s,-24.462s;
     
165.         -moz-animation-delay:-0.45s,-24.462s;
     
166.         -ms-animation-delay:-0.45s,-24.462s;
     
167.         zoom:0.6\9;
     
168. }
     
169. 
     
170. .a-bird-03{
     
171.         top:280px;
     
172.         left:12%;
     
173.         -webkit-transform:scale(0.7);
     
174.         -moz-transform:scale(0.7);
     
175.         -ms-transform:scale(0.7);
     
176.         -webkit-animation-delay:0s,-22.615s;
     
177.         -moz-animation-delay:0s,-22.615s;
     
178.         -ms-animation-delay:0s,-22.615s;
     
179.         zoom:0.7\9;
     
180. }
     
181. 
     
182. .a-bird-04{
     
183.         top:300px;
     
184.         left:85%;
     
185.         background-position:0 -630px;
     
186.         -webkit-transform:scale(0.8);
     
187.         -moz-transform:scale(0.8);
     
188.         -ms-transform:scale(0.8);
     
189.         -webkit-animation-delay:-0.78s,-5.769s;
     
190.         -moz-animation-delay:-0.78s,-5.769s;
     
191.         -ms-animation-delay:-0.78s,-5.769s;
     
192.         zoom:0.8\9;
     
193. }
     
194. 
     
195. .a-bird-05{
     
196.         top:260px;
     
197.         left:93%;
     
198.         background-position:0 -270px;
     
199.         -webkit-transform:scale(0.7);
     
200.         -moz-transform:scale(0.7);
     
201.         -ms-transform:scale(0.7);
     
202.         -webkit-animation-delay:-0.34s,-3.923s;
     
203.         -moz-animation-delay:-0.34s,-3.923s;
     
204.         -ms-animation-delay:-0.34s,-3.923s;
     
205.         zoom:0.7\9;
     
206. }
     
207. 
     
208. .a-bird-06{
     
209.         top:220px;
     
210.         left:79%;
     
211.         background-position:0 -450px;
     
212.         -webkit-transform:scale(0.6);
     
213.         -moz-transform:scale(0.6);
     
214.         -ms-transform:scale(0.6);
     
215.         -webkit-animation-delay:-0.56s,-7.154s;
     
216.         -moz-animation-delay:-0.56s,-7.154s;
     
217.         -ms-animation-delay:-0.56s,-7.154s;
     
218.         zoom:0.6\9;
     
219. }
     
220. 
     
221. @-webkit-keyframes fly{
     
222.         0%{
     
223.                 background-position:0 0;
     
224.         }
     
225. 
     
226.         11.1%{
     
227.                 background-position:0 0;
     
228.         }
     
229. 
     
230.         11.11%{
     
231.                 background-position:0 -90px;
     
232.         }
     
233. 
     
234.         22.21%{
     
235.                 background-position:0 -90px;
     
236.         }
     
237. 
     
238.         22.22%{
     
239.                 background-position:0 -180px;
     
240.         }
     
241. 
     
242.         33.32%{
     
243.                 background-position:0 -180px;
     
244.         }
     
245. 
     
246.         33.33%{
     
247.                 background-position:0 -270px;
     
248.         }
     
249. 
     
250.         44.43%{
     
251.                 background-position:0 -270px;
     
252.         }
     
253. 
     
254.         44.44%{
     
255.                 background-position:0 -360px;
     
256.         }
     
257. 
     
258.         55.54%{
     
259.                 background-position:0 -360px;
     
260.         }
     
261. 
     
262.         55.55%{
     
263.                 background-position:0 -450px;
     
264.         }
     
265. 
     
266.         66.65%{
     
267.                 background-position:0 -450px;
     
268.         }
     
269. 
     
270.         66.66%{
     
271.                 background-position:0 -540px;
     
272.         }
     
273. 
     
274.         77.76%{
     
275.                 background-position:0 -540px;
     
276.         }
     
277. 
     
278.         77.77%{
     
279.                 background-position:0 -630px;
     
280.         }
     
281. 
     
282.         88.87%{
     
283.                 background-position:0 -630px;
     
284.         }
     
285. 
     
286.         88.88%{
     
287.                 background-position:0 -720px;
     
288.         }
     
289. 
     
290.         99.98%{
     
291.                 background-position:0 -720px;
     
292.         }
     
293. 
     
294.         100%{
     
295.                 background-position:0 0;
     
296.         }
     
297. 
     
298. }
     
299. 
     
300. @-moz-keyframes fly{
     
301.         0%{
     
302.                 background-position:0 0;
     
303.         }
     
304. 
     
305.         11.1%{
     
306.                 background-position:0 0;
     
307.         }
     
308. 
     
309.         11.11%{
     
310.                 background-position:0 -90px;
     
311.         }
     
312. 
     
313.         22.21%{
     
314.                 background-position:0 -90px;
     
315.         }
     
316. 
     
317.         22.22%{
     
318.                 background-position:0 -180px;
     
319.         }
     
320. 
     
321.         33.32%{
     
322.                 background-position:0 -180px;
     
323.         }
     
324. 
     
325.         33.33%{
     
326.                 background-position:0 -270px;
     
327.         }
     
328. 
     
329.         44.43%{
     
330.                 background-position:0 -270px;
     
331.         }
     
332. 
     
333.         44.44%{
     
334.                 background-position:0 -360px;
     
335.         }
     
336. 
     
337.         55.54%{
     
338.                 background-position:0 -360px;
     
339.         }
     
340. 
     
341.         55.55%{
     
342.                 background-position:0 -450px;
     
343.         }
     
344. 
     
345.         66.65%{
     
346.                 background-position:0 -450px;
     
347.         }
     
348. 
     
349.         66.66%{
     
350.                 background-position:0 -540px;
     
351.         }
     
352. 
     
353.         77.76%{
     
354.                 background-position:0 -540px;
     
355.         }
     
356. 
     
357.         77.77%{
     
358.                 background-position:0 -630px;
     
359.         }
     
360. 
     
361.         88.87%{
     
362.                 background-position:0 -630px;
     
363.         }
     
364. 
     
365.         88.88%{
     
366.                 background-position:0 -720px;
     
367.         }
     
368. 
     
369.         99.98%{
     
370.                 background-position:0 -720px;
     
371.         }
     
372. 
     
373.         100%{
     
374.                 background-position:0 0;
     
375.         }
     
376. 
     
377. }
     
378. 
     
379. @-ms-keyframes fly{
     
380.         0%{
     
381.                 background-position:0 0;
     
382.         }
     
383. 
     
384.         11.1%{
     
385.                 background-position:0 0;
     
386.         }
     
387. 
     
388.         11.11%{
     
389.                 background-position:0 -90px;
     
390.         }
     
391. 
     
392.         22.21%{
     
393.                 background-position:0 -90px;
     
394.         }
     
395. 
     
396.         22.22%{
     
397.                 background-position:0 -180px;
     
398.         }
     
399. 
     
400.         33.32%{
     
401.                 background-position:0 -180px;
     
402.         }
     
403. 
     
404.         33.33%{
     
405.                 background-position:0 -270px;
     
406.         }
     
407. 
     
408.         44.43%{
     
409.                 background-position:0 -270px;
     
410.         }
     
411. 
     
412.         44.44%{
     
413.                 background-position:0 -360px;
     
414.         }
     
415. 
     
416.         55.54%{
     
417.                 background-position:0 -360px;
     
418.         }
     
419. 
     
420.         55.55%{
     
421.                 background-position:0 -450px;
     
422.         }
     
423. 
     
424.         66.65%{
     
425.                 background-position:0 -450px;
     
426.         }
     
427. 
     
428.         66.66%{
     
429.                 background-position:0 -540px;
     
430.         }
     
431. 
     
432.         77.76%{
     
433.                 background-position:0 -540px;
     
434.         }
     
435. 
     
436.         77.77%{
     
437.                 background-position:0 -630px;
     
438.         }
     
439. 
     
440.         88.87%{
     
441.                 background-position:0 -630px;
     
442.         }
     
443. 
     
444.         88.88%{
     
445.                 background-position:0 -720px;
     
446.         }
     
447. 
     
448.         99.98%{
     
449.                 background-position:0 -720px;
     
450.         }
     
451. 
     
452.         100%{
     
453.                 background-position:0 0;
     
454.         }
     
455. 
     
456. }
     
457. 
     
458. @-webkit-keyframes forward{
     
459.         0%{
     
460.                 left:110%;
     
461.         }
     
462. 
     
463.         100%{
     
464.                 left:-20%;
     
465.         }
     
466. 
     
467. }
     
468. 
     
469. @-moz-keyframes forward{
     
470.         0%{
     
471.                 left:110%;
     
472.         }
     
473. 
     
474.         100%{
     
475.                 left:-20%;
     
476.         }
     
477. 
     
478. }
     
479. 
     
480. @-ms-keyframes forward{
     
481.         0%{
     
482.                 left:110%;
     
483.         }
     
484. 
     
485.         100%{
     
486.                 left:-20%;
     
487.         }
     
488. 
     
489. }

複製代碼

5、在第三方放入代码

1. <script type="text/javascript" src="templates/default/set_body.htm"></script>

複製代碼

6、在其他头部放入代码

1. <script src="http://icode.258club.com/templates/colors/jquery_331.htm"></script>
   
2. <script src="http://icode.258club.com/templates/colors/d_move.htm"></script>

複製代碼

注：已经安装了jq库的请忽略第6步。

无界

图片素材在这里

無名.

沙发支持一下

4rphotoclub

支持一定支持~

网雨霏霏

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

beatpop

回復 2# 无界


我按照你的方法去做，发现这个切换图标位置有问题。
跑到挡住了登陆位置，

下載 (164.77 KB)

2019-8-17 08:52

BoneI

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

macheng

回復 5# 网雨霏霏


    拉我进一下无界的微信群

网雨霏霏

回復 8# macheng


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

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

无界

回復 8# macheng

下載 (104.95 KB)

2019-8-23 10:11