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

<SCRIPT language=javascript>
    function show_intro(pre,pree, n, select_n,) {
        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=tzm2 onmouseover="show_intro('ytld','tzm',4,2,'hot')" style="float:left;margin-left:6px;">
          <a href="/list.php?fid=27">盐亭新闻</a></div>
        <div class="hot_off" id=tzm3 onmouseover="show_intro('ytld','tzm',4,3,'hot')" style="float:left;margin-left:6px;">
          <a href="/list.php?fid=55">综合新闻</a></div>
        <div class="hot_off" id=tzm4 onmouseover="show_intro('ytld','tzm',4,4,'hot')" style="float:left;margin-left:6px;">
          <a href="/list.php?fid=102">热点新闻</a></div>
      <h3 class="R"></h3>
</tr>
  <tr>
    <td colspan="3" class="middle">
      <div id=ytld1 align="left">$label[a002]</div>
      <div id=ytld2 align="left" style="DISPLAY: none">$label[a003]</div>
      <div id=ytld3 align="left" style="DISPLAY: none">$label[a004]</div>
      <div id=ytld4 align="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”开头一致。

发表评论

邮箱地址不会被公开。 必填项已用*标注

click to changeSecurity Code