找回密码
 注册

QQ登录

只需一步,快速开始

搜索
热搜: 美女
查看: 773|回复: 1

[代码美化] DiscuzX1.5 大秀场(有切换功能)

[复制链接]
发表于 2011-2-24 23:33:40 | 显示全部楼层 |阅读模式
带切换功能,CSS中的图片为网络图片,请自行下载调试。

步骤1:
打开viewthread.htm文件,搜索以下代码

  1. <div id="pt" class="bm cl">
  2. <!--{subtemplate common/simplesearchform}-->
  3. <div class="z">
  4. <a href="./" id="fjump"{if $_G['setting']['forumjump'] == 1}{/if} class="nvhm" title="{lang homepage}">$_G
  5. [setting][bbname]</a>$navigation <em>&#8250;</em> $_G[forum_thread][short_subject]
  6. </div>
  7. </div>
复制代码
步骤2:

在此代码下加入以下代码
  1. <script type="text/javascript">
  2. function switch_daxiuchang(show) {
  3. $('threadadd_show').className = 'show_version ' + show;
  4. $('show_am_span').className = $('show_pm_span').className = '';
  5. $(show + '_span').className = 'threadadd_active';
  6. }
  7. var dxc_show = 'show_am';
  8. function switch_daxiuchang_auto() {
  9. switch_daxiuchang(dxc_show);
  10. dxc_show = dxc_show == 'show_am' ? 'show_pm' : 'show_am';
  11. }
  12. dsc_st = setInterval(switch_daxiuchang_auto, 5000);
  13. </script>

  14. <div style="width: 960px;background: #FFFFFF;margin: 0 auto;">
  15. <div class="threadadd show showvision">

  16. <h3>大秀场</h3>
  17. <dl class="threadadd_main">
  18. <dt id="show_tab" class="changegroup">
  19. <span id="show_am_span" class="threadadd_active">
  20. <a rel="show_am" title="查看大亚湾网友相册" href="javascript:;" onclick="switch_daxiuchang('show_am');">看照片</a>
  21. </span>
  22. <span id="show_pm_span">
  23. <a rel="show_pm" title="查看大亚湾网友摄影" href="javascript:;" onclick="switch_daxiuchang('show_pm');">看风景</a>
  24. </span>
  25. </dt>
  26. <dd id="threadadd_show" class="show_version show_am" onmouseover="clearInterval(dsc_st);" onmouseout="dsc_st = setInterval(switch_daxiuchang_auto, 5000);">
  27. <ul class="show_am"><!--[diy=diy20]--><div id="diy20" class="area"></div><!--[/diy]--></ul>
  28. <ul class="show_pm"><!--[diy=diy21]--><div id="diy21" class="area"></div><!--[/diy]--></ul>
  29. </dd>
  30. </dl>

  31. </div>
  32. </div>
复制代码
步骤3:

往CSS文件里加入以下CSS值

  1. .showvision {height:130px;}
  2. .show {margin-bottom:10px;overflow:hidden;}
  3. .threadadd {background:none repeat scroll 0 0 #EBF2D7;font:100 12px Simsun,Arial;overflow:hidden;padding:3px;width:955px;}
  4. .show h3 {background-position:-96px 3px;}
  5. .show h4 {background-position:-96px 3px;}
  6. .threadadd h3 {background-image:url("http://www.13800.net/images/13800_net/bg_threaduseroption.png");background-repeat:no-repeat;float:left;height:100px;overflow:hidden;padding

  7. -left:35px;width:0;}
  8. .threadadd h4 {background:transparent url("http://www.13800.net/images/13800_net/bg_threaduseroption.png") no-repeat scroll -160px

  9. 0;float:left;height:100px;overflow:hidden;padding-left:35px;width:0;}
  10. .threadadd_main {background:none repeat scroll 0 0 #FFFFFF;float:right;overflow:hidden;position:relative;width:920px;z-index:0;}
  11. .changegroup {height:126px;overflow:hidden;position:absolute;right:2px;top:2px;width:24px;
  12. z-index:1;}
  13. .changegroup span {float:left;margin-bottom:2px;overflow:hidden;padding-left:4px;width:20px;}
  14. .changegroup .threadadd_active {background:url("http://www.13800.net/images/13800_net/bg_threaduseroption.png") no-repeat scroll -134px 0 transparent;}
  15. .changegroup span {float:left;margin-bottom:2px;overflow:hidden;padding-left:4px;width:20px;}
  16. .changegroup a, .changegroup a:visited, .changegroup a:hover {color:#334F67;text-decoration:none;}
  17. .changegroup a {background:none repeat scroll 0 0 #EFEFEF;display:block;height:51px;overflow:hidden;padding:11px 4px 0;width:12px;}
  18. .threadadd_main a, .threadadd_main a:visited {color:#666666;}
  19. .threadadd_active a, .threadadd_active a:visited {background:none repeat scroll 0 0 transparent;color:#8FA624;}
  20. .changegroup a, .changegroup a:visited, .changegroup a:hover {color:#334F67;text-decoration:none;}
  21. .changegroup a {background:none repeat scroll 0 0 #EFEFEF;display:block;height:51px;overflow:hidden;padding:11px 4px 0;width:12px;}
  22. .threadadd_main a, .threadadd_main a:visited {color:#666666;}
  23. #threadadd_show {text-align:left;}
  24. .show_version {height:122px;overflow:hidden;padding:6px 20px 2px 2px;position:relative;z-index:0;}
  25. .show_am .show_pm, .show_pm .show_am, .gossip_am .gossip_pm, .gossip_pm .gossip_am {visibility:hidden;}
  26. .show_am .show_am, .show_pm .show_pm, .gossip_am .gossip_am, .gossip_pm .gossip_pm {visibility:visible;}
  27. .show_version ul {height:123px;overflow:hidden;position:absolute;width:900px;}
复制代码

效果演示:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
发表于 2011-3-17 00:14:18 | 显示全部楼层
楼主,我太崇拜你了!
圈否社区,我的最爱!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表