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导航代码