JS+Table實現的滑動門

2024-09-05 12:19:28

字體：大中小

來源：轉載

供稿：網友

JS+Table實現的滑動門，適合對CSS不太熟悉的朋友，不過很容易就可以改為CSS模式，只需把TABLE改為UL/LI就可以了。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>滑動門</title><style>body {font-family: "宋體";	font-size: 12px;	color: #525252;}td {font-family: "宋體";	font-size: 12px;	color: #525252;}a:link {color: #525252;	font-size: 12px;	text-decoration: none;}a:visited{color: #525252;	font-size: 12px;	text-decoration: none;}a:hover {color: #ff6600;	font-size: 12px;	text-decoration: underline;}.gd1{font-family: "宋體";	font-size: 12px;	color: #ff0000;}.sec11 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; BORDER-LEFT: #C5E1FE 1px solid; CURSOR: hand; COLOR: #01499A; BORDER-BOTTOM: #C5E1FE 1px solid; BACKGROUND-COLOR: #ffffff}.sec21 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; FONT-WEIGHT: 800;color:#01499A; BORDER-LEFT: #C5E1FE 1px solid;BORDER-BOTTOM: #C5E1FE 1px solid; CURSOR: hand; BACKGROUND-COLOR: #E6EEF7;BACKGROUND:url('/jscss/demoimg/200903/bgico.gif') no-repeat}.main_tab {BACKGROUND-COLOR: #ffffff}</style><SCRIPT language=javascript>function secBoard(n)  {    for(i=0;i<secTable.cells.length;i++)      secTable.cells[i].className="sec11";    secTable.cells[n].className="sec21";    for(i=0;i<mainTable.tBodies.length;i++)      mainTable.tBodies[i].style.display="none";    mainTable.tBodies[n].style.display="block";  }</SCRIPT></head><body bgcolor="#FFFFFF"><div align="center">  <table border="0" width="200" cellpadding="0" cellspacing="0" height="145" id="table7" bgcolor=#ecf5ff>    <tr>      <td height="145"><div align="center">          <table border="0" width="200" cellpadding="0" height="140" id="table107">            <tr>              <td height="25"><div align="center">                  <table border="0" width="220" cellpadding="0" height="22" id=secTable>                    <tr>                      <td onmouseover=secBoard(0) width="50%"><p align="center">最新源碼</td>                      <td onmouseover=secBoard(1) width="50%"><p align="center">網頁特效</td>                    </tr>                  </table>                </div></td>            </tr>            <tr>              <td height="115"><div align="center">                  <table id=mainTable border="0" width="195" cellpadding="0" height="115">                    <TBODY style="DISPLAY: block">                      <tr>                        <td height="145"><div align="center">                            <table border="0" width="205" cellpadding="0" height="138">                              <tr>                                <td height="23" width="15" valign="middle"> ·</td>                                <td height="23" width="180">VB在系統托盤中增加圖標示例</td>                              </tr>                              <tr>                                <td height="23" width="15"> ·</td>                                <td height="23" width="180">Ext 2.0 中文手冊</td>                              </tr>                              <tr>                                <td height="23" width="15"> ·</td>                                <td height="23" width="180">《J2EE 1.4 編程指南》</td>                              </tr>                              <tr>                                <td height="23" width="195" colspan="2"><p align="right"><font color="#01499A"> 更多>></font></td>                              </tr>                            </table>                          </div></td>                      </tr>                    </TBODY>                    <TBODY style="DISPLAY: none">                      <tr>                        <td height="145"><div align="center">                            <table border="0" width="205" cellpadding="0" height="138">                              <tr>                                <td height="138" width="195"><b> 網頁特效會讓你的網頁變得炫麗多彩，同時方便瀏覽者操作你的網站，提升用戶體驗。</td>                              </tr>                            </table>                          </div></td>                      </tr>                    </TBODY>                  </table>                </div></td>            </tr>          </table>        </div></td>    </tr>  </table></div></body></html>

上一篇：CSS豎排選項卡Tab

下一篇：來自GG網站的超酷JS導航代碼