免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 论坛首页条形图拼接成图案 [打印本頁]
作者: knights23    時間: 2014-1-26 13:49     標題: 论坛首页条形图拼接成图案

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

拆开是这样的

代码需要放到“全局/站点信息/网站第三方统计代码” 微博桌面截图_20140126201411.jpg
代码如下
  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. }


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


圖片附件: 微博桌面截图_20140126201411.jpg (2014-1-26 20:10, 88.98 KB) / 下載次數 2772
http://sclub.com.tw/discuz/attachment.php?aid=26695&k=d630a15afc828c0db301f9f7e2416867&t=1732284360&sid=rmBYR6

作者: superman1024    時間: 2014-1-26 14:27

謝謝分享
作者: QTalk    時間: 2014-1-26 14:44

回復 1# knights23


    图片看不了，你忘记放哪了
作者: knights23    時間: 2014-1-26 15:04

回復 3# QTalk


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

回復 2# superman1024


希望各位大大发现啥不妥的地方能帮忙改进哈
作者: superman1024    時間: 2014-1-26 15:32

回復  superman1024


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



沒有發現不妥,給樓主支持唷
作者: knights23    時間: 2014-1-26 15:41

回復 6# superman1024

作者: bossll    時間: 2014-1-26 19:03

回復 1# knights23


    你好!
辛勞謝謝分享很好代碼!
版主建議會員你是否修正一下該代碼要修改那個模版與搜索等步驟出來,免改日新手
又有問題題出!
謝謝
作者: knights23    時間: 2014-1-26 20:02

回復 8# bossll


    啊，对哦，我去修改下，多谢大大提醒~
作者: bossll    時間: 2014-1-26 20:07

回復 9# knights23

你好!
不用客氣!
作者: knights23    時間: 2014-1-26 20:15

回復 10# bossll

第一次发，没啥经验，嘿嘿~
作者: 猫千户    時間: 2014-1-26 20:25

其实不用这么多代码的吧。。
作者: knights23    時間: 2014-1-26 20:56

回復 12# 猫千户


    有更简便的方法么？来分享~~~
作者: 猫千户    時間: 2014-1-26 21:02

回復 13# knights23

不会╮(╯﹏╰）╭
作者: knights23    時間: 2014-1-29 12:29

回復 14# 猫千户

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



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2