[分享] 论坛首页条形图拼接成图案

knights23

不知道标题说清楚没，其实就是论坛首页的各个版区条做了些美化
之前在这里学习了很多帖子，后来抓了一个懂一些代码的妹纸帮忙弄了一下，觉得不错，在这里跟大家分享一下
如果有不足的地方，也希望这里的高手前辈们能帮忙修正指导
如下图，我的坛子有8个版区，所以做了8个哦，刚好新年，弄个小马喜庆下哈
折叠起来就是这样的

拆开是这样的

代码需要放到“全局/站点信息/网站第三方统计代码”

下載 (88.98 KB)

2014-1-26 20:10

代码如下

1. var sepindex=1;
   
2. jQuery(".groupsep").each(function(){
   
3. if(sepindex == 1){
   
4.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_009.jpg)")
   
5.    sepindex = sepindex+1;
   
6. }else if(sepindex == 2){
   
7.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_010.jpg)")
   
8.    sepindex = sepindex+1;
   
9. }else if(sepindex == 3){
   
10.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_011.jpg)")
    
11.    sepindex = sepindex+1;
    
12. }else if(sepindex == 4){
    
13.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_012.jpg)")
    
14.    sepindex = sepindex+1;
    
15. }else if(sepindex == 5){
    
16.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_013.jpg)")
    
17.    sepindex = sepindex+1;
    
18. }else if(sepindex == 6){
    
19.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_014.jpg)")
    
20.    sepindex = sepindex+1;
    
21. }else if(sepindex == 7){
    
22.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_015.jpg)")
    
23.    sepindex = sepindex+1;
    
24. }else if(sepindex == 8){
    
25.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_016.jpg)")
    
26.    sepindex = sepindex+1;
    
27. }else{
    
28.    jQuery(this).css("background-image","url(http://img226.poco.cn/mypoco/myphoto/20140123/23/53837084201401232358561881476678215_009.jpg)")
    
29.    sepindex = sepindex+1;
    
30. }
    
31. 
    
32. 
    
33. });

複製代碼

然后有必要说一下，就是第一行的图片跟第九行是重复的，但是在首页上是不会显示出第九行的，据小伙伴所说是备用的，具体备用来做啥的，吾辈真是不晓得啊╮(╯_╰)╭如果有大大知道是为啥，欢迎来答疑解惑，感激不尽！
如果大家自己的论坛首页的版区条不是8个，或多或少的话，可以根据自己的论坛实际情况增减哈
嘛，于是上面就是咱分享的内容，希望能够对同样喜欢臭美的版主有帮助吧

knights23

回復 14# 猫千户

那就等等看，有没有知道更少代码的高手吧！

猫千户

回復 13# knights23

不会╮(╯﹏╰）╭

knights23

回復 12# 猫千户


    有更简便的方法么？来分享~~~

猫千户

其实不用这么多代码的吧。。

knights23

回復 10# bossll

第一次发，没啥经验，嘿嘿~

bossll

回復 9# knights23

你好!
不用客氣!

knights23

回復 8# bossll


    啊，对哦，我去修改下，多谢大大提醒~

bossll

回復 1# knights23


    你好!
辛勞謝謝分享很好代碼!
版主建議會員你是否修正一下該代碼要修改那個模版與搜索等步驟出來,免改日新手
又有問題題出!
謝謝

knights23

回復 6# superman1024