分享X1.5大秀场（带切换功能，带DIY，装上即可直接DIY调用）估计有人喜欢

不被谁所认识 · 发表于 2010-10-7 23:17:21

本帖最后由不被谁所认识于 2010-10-7 23:22 编辑

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

<div id="pt" class="bm cl">
<div class="z">
<a href="./" id="fjump"{if $_G['setting']['forumjump'] == 1} onmouseover="showMenu({'ctrlid':this.id})"{/if} class="nvhm" title="{lang homepage}">$_G
[setting][bbname]</a>$navigation <em>&rsaquo;</em> $_G[forum_thread][short_subject]
</div>
</div>

复制代码

在此代码下加入以下代码：

<script type="text/javascript">
function switch_daxiuchang(show) {
$('threadadd_show').className = 'show_version ' + show;
$('show_am_span').className = $('show_pm_span').className = '';
$(show + '_span').className = 'threadadd_active';
}
var dxc_show = 'show_am';
function switch_daxiuchang_auto() {
switch_daxiuchang(dxc_show);
dxc_show = dxc_show == 'show_am' ? 'show_pm' : 'show_am';
}
dsc_st = setInterval(switch_daxiuchang_auto, 5000);
</script>
<div style="width: 960px;background: #FFFFFF;margin: 0 auto;">
<div class="threadadd show showvision">
<h3>大秀场</h3>
<dl class="threadadd_main">
<dt id="show_tab" class="changegroup">
<span id="show_am_span" class="threadadd_active">
<a rel="show_am" title="查看虫友相册" href="javascript:;" onclick="switch_daxiuchang('show_am');">晒照片</a>
</span>
<span id="show_pm_span">
<a rel="show_pm" title="查看虫友摄影" href="javascript:;" onclick="switch_daxiuchang('show_pm');">晾风景</a>
</span>
</dt>
<dd id="threadadd_show" class="show_version show_am" onmouseover="clearInterval(dsc_st);" onmouseout="dsc_st = setInterval(switch_daxiuchang_auto, 5000);">
<ul class="show_am"><div id="diy20" class="area"></div></ul>
<ul class="show_pm"><div id="diy21" class="area"></div></ul>
</dd>
</dl>
</div>
</div>

复制代码

然后往CSS文件里加入以下CSS值

.showvision {height:130px;}
.show {margin-bottom:10px;overflow:hidden;}
.threadadd {background:none repeat scroll 0 0 #EBF2D7;font:100 12px Simsun,Arial;overflow:hidden;padding:3px;width:955px;}
.show h3 {background-position:-96px 3px;}
.show h4 {background-position:-96px 3px;}
.threadadd h3 {background-image:url("http://www.xmcong.com/image/bg_threaduseroption.png");background-repeat:no-repeat;float:left;height:100px;overflow:hidden;padding
-left:35px;width:0;}
.threadadd h4 {background:transparent url("http://www.xmcong.com/image/bg_threaduseroption.png") no-repeat scroll -160px
0;float:left;height:100px;overflow:hidden;padding-left:35px;width:0;}
.threadadd_main {background:none repeat scroll 0 0 #FFFFFF;float:right;overflow:hidden;position:relative;width:920px;z-index:0;}
.changegroup {height:126px;overflow:hidden;position:absolute;right:2px;top:2px;width:24px;
z-index:1;}
.changegroup span {float:left;margin-bottom:2px;overflow:hidden;padding-left:4px;width:20px;}
.changegroup .threadadd_active {background:url("http://www.xmcong.com/image/bg_threaduseroption.png") no-repeat scroll -134px 0 transparent;}
.changegroup span {float:left;margin-bottom:2px;overflow:hidden;padding-left:4px;width:20px;}
.changegroup a, .changegroup a:visited, .changegroup a:hover {color:#334F67;text-decoration:none;}
.changegroup a {background:none repeat scroll 0 0 #EFEFEF;display:block;height:51px;overflow:hidden;padding:11px 4px 0;width:12px;}
.threadadd_main a, .threadadd_main a:visited {color:#666666;}
.threadadd_active a, .threadadd_active a:visited {background:none repeat scroll 0 0 transparent;color:#8FA624;}
.changegroup a, .changegroup a:visited, .changegroup a:hover {color:#334F67;text-decoration:none;}
.changegroup a {background:none repeat scroll 0 0 #EFEFEF;display:block;height:51px;overflow:hidden;padding:11px 4px 0;width:12px;}
.threadadd_main a, .threadadd_main a:visited {color:#666666;}
#threadadd_show {text-align:left;}
.show_version {height:122px;overflow:hidden;padding:6px 20px 2px 2px;position:relative;z-index:0;}
.show_am .show_pm, .show_pm .show_am, .gossip_am .gossip_pm, .gossip_pm .gossip_am {visibility:hidden;}
.show_am .show_am, .show_pm .show_pm, .gossip_am .gossip_am, .gossip_pm .gossip_pm {visibility:visible;}
.show_version ul {height:123px;overflow:hidden;position:absolute;width:900px;}

复制代码

完成以上操作即可实现以下效果了

装好即可直接在前台操作DIY了，宽度960PX测试完整无误，本帖只做分享不带协助解决或回答的义务，有需要的朋友可以装上看看。

演示效果：厦门虫丛秀场 http://www.xmcong.com/forum.php?mod=viewthread&tid=271

不被谁所认识 · 发表于 2010-10-7 23:18:02

本帖最后由不被谁所认识于 2010-10-7 23:24 编辑

2楼给自己也给DZ

PS：演示地址只做短暂演示，等下即将更换其他效果

duanzhenliang · 发表于 2010-10-7 23:20:57

bobofashion · 发表于 2010-10-7 23:21:44

不错收藏了。。。

anshow · 发表于 2010-10-7 23:33:21

先感谢

勿忘我科技 · 发表于 2010-10-8 00:07:46

不错的

nightowl · 发表于 2010-10-8 01:25:13

很长。我用不着，支持辛苦发布。

mtkxyx · 发表于 2010-10-8 09:07:25

不被谁所认识 · 发表于 2010-10-8 10:43:22

欧迪帖子顶一顶

PSHOP · 发表于 2010-10-8 11:24:32

回复不被谁所认识的帖子

DIY在哪里找，我安装上了，显示了，但是没有图片，不知道IDY在哪里能设置这里面的图片

		自动登录	找回密码
密码			立即注册