免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

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

1.gif
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. <div id="a-dayan" class="animate-layer">
  38. <s class="a-bird a-bird-01"></s>
  39. <s class="a-bird a-bird-02"></s>
  40. <s class="a-bird a-bird-03"></s>
  41. <s class="a-bird a-bird-04"></s>
  42. <s class="a-bird a-bird-05"></s>
  43. <s class="a-bird a-bird-06"></s>
  44. </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. .q_qiehuan {
  6.     position: absolute;
  7.     z-index: 199;
  8. margin-left: 1100px;
  9.     margin-top: 15px;
  10.     width: 40px;
  11.     height: 40px;
  12.     line-height: 20;
  13.     overflow: hidden;
  14.     background: url(切换背景按钮图标) no-repeat 0px 0px;
  15.     transition: none;
  16. border-top-right-radius: 5px;
  17. }
  18. .q_qiehuan_menu h2 {
  19.     position: relative;
  20.     height: 54px;
  21.     margin: 0px;
  22.     padding: 0px 15px;
  23.     line-height: 54px;
  24.     font-size: 16px;
  25.     font-weight: bold;
  26.     color: #333;
  27.     border-bottom: 1px solid #EFEFEF;
  28.     background: #FAFAFA url(弹出背景框“换个心情”图片) no-repeat 15px center;
  29. }
  30. .q_qiehuan_menu span {
  31.     width: 98px;
  32.     height: 70px;
  33.     border: 2px solid #fff;
  34.     margin-left: 15px;
  35.     float: left;
  36.     margin-bottom: 15px;
  37.     cursor: pointer;
  38.     position: relative;
  39. }

  40. .q_qiehuan_menu span:hover {
  41.     width: 98px;
  42.     height: 70px;
  43.     border: 2px solid #2d92dd;
  44.     margn-left: 15px;
  45.     float: left;
  46.     margin-biottom: 15px;
  47.     cursor: pointer;
  48.     position: relative;
  49. }

  50. .q_qiehuan_menu {
  51.     left: 30%;
  52.     width: 600px;
  53.     height: auto;
  54.     border: 1px solid #BCBCBC;
  55.     background: #FFF;
  56.     box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
  57. position: absolute;
  58.     z-index: 5200;
  59. }


  60. .q_qiehuan_menu span:hover  em{
  61.     display: block;
  62.     position: absolute;
  63.     bottom: 0;
  64.     left: 0;
  65.     width: 98px;
  66.     height: 24px;
  67.     line-height: 24px;
  68.     text-align: center;
  69.     font-size: 12px;
  70.     color: white;
  71.     background-color: rgba(0,0,0,0.5);
  72.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#80000000');
  73. }

  74. .q_qiehuan_menu span em {
  75.     display: none;
  76. }
  77. .Sunset_glow{background: url(背景1) no-repeat fixed center top #0D1722;background-size: cover;}
  78. .Snow{background: url(背景2) no-repeat fixed center top #282062;}
  79. .NewYear{background: url(背景3) no-repeat fixed center top #b3282f;background-size: cover;}
  80. .London{background: url(背景4) no-repeat fixed center top #2A333B;background-size: cover;}
  81. .Flowers{background: url(背景5) no-repeat fixed center top #F5F3F0;}
  82. .Wizard{background: url(背景6) no-repeat fixed center top #5D974D;}
  83. .California{background: url(背景7) repeat-x fixed center bottom transparent;}
  84. .Cloud{background: url(背景8) repeat-x bottom fixed;}
  85. .Sky{background: #0d1722 url(背景9) no-repeat center top fixed;}
  86. .Lavender{background: url(背景10) no-repeat fixed center top #FFF;}
  87. .City{background: url(背景11) repeat-x fixed center top transparent !important;}
  88. .Black{background: url(背景12) repeat fixed 0px 0px #313131;}
  89. .Beige{background: url(背景13) repeat fixed 0px 0px #F7F7DF;}
  90. .Dragon{background: url(背景14) repeat fixed center top #060404;}
  91. .minecraf{background: url(背景15) no-repeat fixed center top #0D1722;background-size: cover;}
  92. .dialog-title {margin-bottom: -30px;position: relative;height: 30px;cursor: move;}
  93. .q_qiehuan_menu a.dialog-handle {
  94.     float: right;
  95.     margin-right: 15px;
  96.     margin-top: 19px;
  97.     width: 16px;
  98.     height: 16px;
  99.     display: inline-block;
  100.     overflow: hidden;
  101.     background: url(关闭按钮);
  102.     background-repeat: no-repeat;
  103. }

  104. .q_qiehuan_menu a.dialog-handle:hover {
  105.     background-position: 0px -16px;
  106. }
  107. .animate-layer {
  108.     position: fixed;
  109.     top: 0;
  110.     right: 0;
  111.     bottom: 0;
  112.     left: 0;
  113.     overflow: hidden;
  114.     z-index: -1;
  115. }

  116. .animate-layer:before{
  117.         display:none;
  118. }

  119. .animate-layer:after{
  120.         display:none;
  121. }

  122. .a-bird{
  123.         z-index:-1;
  124.         position:absolute;
  125.         width:120px;
  126.         height:90px;
  127.         background-image:url(大雁);
  128.         background-repeat:no-repeat;
  129.         -webkit-animation:fly 1s linear infinite,forward 30s linear infinite;
  130.         -moz-animation:fly 1s linear infinite,forward 30s linear infinite;
  131.         -ms-animation:fly 1s linear infinite,forward 30s linear infinite;
  132. }

  133. .a-bird-01{
  134.         top:320px;
  135.         left:-3%;
  136.         background-position:0 -540px;
  137.         -webkit-transform:scale(0.8);
  138.         -moz-transform:scale(0.8);
  139.         -ms-transform:scale(0.8);
  140.         -webkit-animation-delay:-0.67s,-26.077s;
  141.         -moz-animation-delay:-0.67s,-26.077s;
  142.         -ms-animation-delay:-0.67s,-26.077s;
  143.         zoom:0.8\9;
  144. }

  145. .a-bird-02{
  146.         top:240px;
  147.         left:4%;
  148.         background-position:0 -360px;
  149.         -webkit-transform:scale(0.6);
  150.         -moz-transform:scale(0.6);
  151.         -ms-transform:scale(0.6);
  152.         -webkit-animation-delay:-0.45s,-24.462s;
  153.         -moz-animation-delay:-0.45s,-24.462s;
  154.         -ms-animation-delay:-0.45s,-24.462s;
  155.         zoom:0.6\9;
  156. }

  157. .a-bird-03{
  158.         top:280px;
  159.         left:12%;
  160.         -webkit-transform:scale(0.7);
  161.         -moz-transform:scale(0.7);
  162.         -ms-transform:scale(0.7);
  163.         -webkit-animation-delay:0s,-22.615s;
  164.         -moz-animation-delay:0s,-22.615s;
  165.         -ms-animation-delay:0s,-22.615s;
  166.         zoom:0.7\9;
  167. }

  168. .a-bird-04{
  169.         top:300px;
  170.         left:85%;
  171.         background-position:0 -630px;
  172.         -webkit-transform:scale(0.8);
  173.         -moz-transform:scale(0.8);
  174.         -ms-transform:scale(0.8);
  175.         -webkit-animation-delay:-0.78s,-5.769s;
  176.         -moz-animation-delay:-0.78s,-5.769s;
  177.         -ms-animation-delay:-0.78s,-5.769s;
  178.         zoom:0.8\9;
  179. }

  180. .a-bird-05{
  181.         top:260px;
  182.         left:93%;
  183.         background-position:0 -270px;
  184.         -webkit-transform:scale(0.7);
  185.         -moz-transform:scale(0.7);
  186.         -ms-transform:scale(0.7);
  187.         -webkit-animation-delay:-0.34s,-3.923s;
  188.         -moz-animation-delay:-0.34s,-3.923s;
  189.         -ms-animation-delay:-0.34s,-3.923s;
  190.         zoom:0.7\9;
  191. }

  192. .a-bird-06{
  193.         top:220px;
  194.         left:79%;
  195.         background-position:0 -450px;
  196.         -webkit-transform:scale(0.6);
  197.         -moz-transform:scale(0.6);
  198.         -ms-transform:scale(0.6);
  199.         -webkit-animation-delay:-0.56s,-7.154s;
  200.         -moz-animation-delay:-0.56s,-7.154s;
  201.         -ms-animation-delay:-0.56s,-7.154s;
  202.         zoom:0.6\9;
  203. }

  204. @-webkit-keyframes fly{
  205.         0%{
  206.                 background-position:0 0;
  207.         }

  208.         11.1%{
  209.                 background-position:0 0;
  210.         }

  211.         11.11%{
  212.                 background-position:0 -90px;
  213.         }

  214.         22.21%{
  215.                 background-position:0 -90px;
  216.         }

  217.         22.22%{
  218.                 background-position:0 -180px;
  219.         }

  220.         33.32%{
  221.                 background-position:0 -180px;
  222.         }

  223.         33.33%{
  224.                 background-position:0 -270px;
  225.         }

  226.         44.43%{
  227.                 background-position:0 -270px;
  228.         }

  229.         44.44%{
  230.                 background-position:0 -360px;
  231.         }

  232.         55.54%{
  233.                 background-position:0 -360px;
  234.         }

  235.         55.55%{
  236.                 background-position:0 -450px;
  237.         }

  238.         66.65%{
  239.                 background-position:0 -450px;
  240.         }

  241.         66.66%{
  242.                 background-position:0 -540px;
  243.         }

  244.         77.76%{
  245.                 background-position:0 -540px;
  246.         }

  247.         77.77%{
  248.                 background-position:0 -630px;
  249.         }

  250.         88.87%{
  251.                 background-position:0 -630px;
  252.         }

  253.         88.88%{
  254.                 background-position:0 -720px;
  255.         }

  256.         99.98%{
  257.                 background-position:0 -720px;
  258.         }

  259.         100%{
  260.                 background-position:0 0;
  261.         }

  262. }

  263. @-moz-keyframes fly{
  264.         0%{
  265.                 background-position:0 0;
  266.         }

  267.         11.1%{
  268.                 background-position:0 0;
  269.         }

  270.         11.11%{
  271.                 background-position:0 -90px;
  272.         }

  273.         22.21%{
  274.                 background-position:0 -90px;
  275.         }

  276.         22.22%{
  277.                 background-position:0 -180px;
  278.         }

  279.         33.32%{
  280.                 background-position:0 -180px;
  281.         }

  282.         33.33%{
  283.                 background-position:0 -270px;
  284.         }

  285.         44.43%{
  286.                 background-position:0 -270px;
  287.         }

  288.         44.44%{
  289.                 background-position:0 -360px;
  290.         }

  291.         55.54%{
  292.                 background-position:0 -360px;
  293.         }

  294.         55.55%{
  295.                 background-position:0 -450px;
  296.         }

  297.         66.65%{
  298.                 background-position:0 -450px;
  299.         }

  300.         66.66%{
  301.                 background-position:0 -540px;
  302.         }

  303.         77.76%{
  304.                 background-position:0 -540px;
  305.         }

  306.         77.77%{
  307.                 background-position:0 -630px;
  308.         }

  309.         88.87%{
  310.                 background-position:0 -630px;
  311.         }

  312.         88.88%{
  313.                 background-position:0 -720px;
  314.         }

  315.         99.98%{
  316.                 background-position:0 -720px;
  317.         }

  318.         100%{
  319.                 background-position:0 0;
  320.         }

  321. }

  322. @-ms-keyframes fly{
  323.         0%{
  324.                 background-position:0 0;
  325.         }

  326.         11.1%{
  327.                 background-position:0 0;
  328.         }

  329.         11.11%{
  330.                 background-position:0 -90px;
  331.         }

  332.         22.21%{
  333.                 background-position:0 -90px;
  334.         }

  335.         22.22%{
  336.                 background-position:0 -180px;
  337.         }

  338.         33.32%{
  339.                 background-position:0 -180px;
  340.         }

  341.         33.33%{
  342.                 background-position:0 -270px;
  343.         }

  344.         44.43%{
  345.                 background-position:0 -270px;
  346.         }

  347.         44.44%{
  348.                 background-position:0 -360px;
  349.         }

  350.         55.54%{
  351.                 background-position:0 -360px;
  352.         }

  353.         55.55%{
  354.                 background-position:0 -450px;
  355.         }

  356.         66.65%{
  357.                 background-position:0 -450px;
  358.         }

  359.         66.66%{
  360.                 background-position:0 -540px;
  361.         }

  362.         77.76%{
  363.                 background-position:0 -540px;
  364.         }

  365.         77.77%{
  366.                 background-position:0 -630px;
  367.         }

  368.         88.87%{
  369.                 background-position:0 -630px;
  370.         }

  371.         88.88%{
  372.                 background-position:0 -720px;
  373.         }

  374.         99.98%{
  375.                 background-position:0 -720px;
  376.         }

  377.         100%{
  378.                 background-position:0 0;
  379.         }

  380. }

  381. @-webkit-keyframes forward{
  382.         0%{
  383.                 left:110%;
  384.         }

  385.         100%{
  386.                 left:-20%;
  387.         }

  388. }

  389. @-moz-keyframes forward{
  390.         0%{
  391.                 left:110%;
  392.         }

  393.         100%{
  394.                 left:-20%;
  395.         }

  396. }

  397. @-ms-keyframes forward{
  398.         0%{
  399.                 left:110%;
  400.         }

  401.         100%{
  402.                 left:-20%;
  403.         }

  404. }
複製代碼
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步。
1

評分人數

图片素材在这里
1811010031a4332aa193605b8b.gif
1811010031d16e7d39c678dbe3.jpg
1811010031ddac54b3f212e16c.jpg
1811010553b0c641ce5d1cb93e.png
1811010553d2efedf7392233d3.png
1811010553d239cc7b359caa21.png
1811010553e5c2721050d5dd47.png
1811010553e6d10ad40e2b947d.png
1811010553ea7ca5c7d4b79702.png
1811010553f8b8612b6812adda.png
18110100312eb9c5086b8b5d4f.jpg
18110100317ec8bd8e06bbd48a.jpg
18110105530ebcb425a7abed72.png
18110105535c1710e35f5aaeef.png
18110105539c9c0f6605429ca1.png
18110923184cf6050d328d6433.gif
181101003171d4d9532ac1849f.png
181101003173fcabf5ff507a14.jpg
181101003175d5003daaf6f4df.jpg
181101003194cace8fb80bf9df.png
181101055307feebc728cec6d6.gif
181101055361ac03ba11f37883.png
1811010031079fe6222cbeeaa0.jpg
1811010031532d6d7d3e39a94c.png
1811010553208b55521b737c04.png
1811010553380e383dc4786b5d.png
1811010553962b04d066576c0f.png
18110100310038b86eeb7e6fd7.jpg
18110100310235f53cc03de181.jpg
18110105530767f15cb0366e85.png
181101003738162aa928f7fec2.jpg
1811010553518160d4212e86ea.png
2

評分人數

TOP

沙发支持一下

TOP

支持一定支持~

TOP

支持。非常感谢楼主的无私分享
flash之路欢迎你http://flashroad.joinbbs.net

TOP

回復 2# 无界


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



12.png
2019-8-17 08:52

TOP

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

TOP

回復 5# 网雨霏霏


    拉我进一下无界的微信群

TOP

本帖最後由 网雨霏霏 於 2019-8-23 07:33 編輯

回復 8# macheng


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

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

TOP

回復 8# macheng

20190823100608.jpg
2019-8-23 10:11

TOP

返回列表