触显(滑动门)代码及其使用方法

触显（滑动门）代码及其使用方法
教程：/read-bbs-tid-172916.html#378997
触显（滑动门）代码。

演示地址：
/******************************************
触显JS代码以下部分加在index.htm中的
<!--
<?php
print <<<EOT
-->
后
*******************************************/
<SCRIPT language=javascript>
function show_intro(pre,pree, n, select_n,css) {
for (i = 1; i <= n; i++) {
var intro = document.getElementById(pre + i);
var cha = document.getElementById(pree + i);
intro.style.display = "none";
cha.className=css + "_off";
if (i == select_n) {
intro.style.display = "block";
cha.className=css + "_on";
}
}
}
</SCRIPT>
/******************************************
触显CSS代码以下部分加在css.css中
图片大小：62×28
*******************************************/
.hot_off {
BACKGROUND: url(ty1.gif) no-repeat;
width:62px;
height:18px;
padding-top:10px;
}
.hot_on {
BACKGROUND: url(ty2.gif) no-repeat;
width:62px;
height:18px;
padding-top:10px;
}
/******************************************
页面代码，以下部分加在index.htm中
*******************************************/
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dragTable">
<tr>
<td class="head">
<h3 class="L"></h3>
<div class="hot_on" id=tzm1 onmouseover="show_intro('ytld','tzm',4,1,'hot')" style="float:left;">
<a href="/list.php?fid=31">工作动态</a></div>
<div class="hot_off" id=tzm2onmouseover="show_intro('ytld','tzm',4,2,'hot')" style="float:left;ma rgin-left:6px;">
<a href="/list.php?fid=27">盐亭新闻</a></div>
<div class="hot_off" id=tzm3onmouseover="show_intro('ytld','tzm',4,3,'hot')" style="float:left;ma rgin-left:6px;">
<a href="/list.php?fid=55">综合新闻</a></div>
<div class="hot_off" id=tzm4onmouseover="show_intro('ytld','tzm',4,4,'hot')" style="float:left;ma rgin-left:6px;">
<a href="/list.php?fid=102">热点新闻</a></div>
<h3 class="R"></h3>
</tr>
<tr>
<td colspan="3" class="middle">
<div id=ytld1align="left">$label[a002]</div>
<div id=ytld2align="left" style="DISPLAY: none">$label[a003]</div>
<div id=ytld3align="left" style="DISPLAY: none">$label[a004]</div>
<div id=ytld4align="left" style="DISPLAY: none">$label[a001]</div>
</td>
</tr>
<tr>
<td colspan="3" class="foot">
<h3 class="L"></h3>
<h3 class="R"></h3></td>
</tr>
</table>
使用方法：
请注意代码中的“红色”部分，这就是你在做另一个触显时需要修改的地方。

其中的“ytsb”和“tzm”你可以任意定义。

如：你若再建一个触显，你可以将“ytsb”和“tzm”修改为“ytld”和“yt”等。

也就是说：每建一个触显，这两个都要不相同，不然就不会动了。

另外，你还需要修改的地方是：4,1 4,2 4,3 4,4这是指你触显个数及序号。

如：三个触显，就应该是3,1 3,2 3,3
二个触显，就应该是2,1 2,2
五个触显，就应该是5,1 5,2 5,3 5,4 5,5
依次类推。

还有一个地方应注意，就是其中的“hot”，必须同你的CSS代码中的“hot”开头一致。

其他就不用我多说了。

这应该是目前最好的最容易掌握的触显代码。

希望你能喜欢，并成功运用！。