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

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个，或多或少的话，可以根据自己的论坛实际情况增减哈
嘛，于是上面就是咱分享的内容，希望能够对同样喜欢臭美的版主有帮助吧

superman1024

謝謝分享

QTalk

回復 1# knights23


    图片看不了，你忘记放哪了

knights23

回復 3# QTalk


    上传无能啊，所以放的是外联相册的地址，还是看不到的话去论坛里看下吧，在风格里选备注是“蓝”跟“粉”的都可以哈
     默认的那个模板没弄
预览请戳：小坛子入口

knights23

回復 2# superman1024


希望各位大大发现啥不妥的地方能帮忙改进哈

superman1024

回復  superman1024


希望各位大大发现啥不妥的地方能帮忙改进哈
knights23 發表於 2014-1-26 15:10

沒有發現不妥,給樓主支持唷

knights23

回復 6# superman1024

bossll

回復 1# knights23


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

knights23

回復 8# bossll


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

bossll

回復 9# knights23

你好!
不用客氣!