简单滑动门技术实现

腾讯首页滑动门技术实现
相对来说，腾讯的滑动门技术应该是比较简单的，用到了CSS、DIV、Javascript和表格等技术。

<style type="text/css"> .fod {background:#D1E7FC;border-top:1px solid #9EC9EC;border-left:1px solid #9EC9EC;} .fod td{border-right:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;cursor:pointer;} .fod td.s{border-bottom:1px solid #FFFFFF;background:#FFFFFF;font-weight:bold;} .fodinfo {border:1px solid #9EC9EC;border-top;} .dis{display:block;} .undis{display:none;} </style> <script type="text/javascript"> function getNames(obj,name,tij) { var p = document.getElementById(obj); var mlist = p.getElementsByTagName(tij); var rlist = new Array(); for(i=0;i<mlist.length;i++) { if(mlist[i].getAttribute("name") == name) { rlist[rlist.length] = mlist[i]; } } return rlist; } function fod(obj,name) { var p = obj.parentNode.getElementsByTagName("td"); var p1 = getNames(name,"f","div"); // document.getElementById(name).getElementsByTagName("div"); for(i=0;i<p1.length;i++) { if(obj==p[i]) { p[i].className = "s"; p1[i].className = "dis"; } else { p[i].className = ""; p1[i].className = "undis"; } } } </script> <table width="293" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="292"> <!--导航控制区域 --> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fod"> <tr align="center"> <td width="50%" class="s" onMouseOver="fod(this,'foda4')" onClick="register0410('game',1)"><a href="http://news.qq.com" >新闻</a></td> <td width="50%" onMouseOver="fod(this,'foda4')" onClick="register0410('game',2)"><a href="http://blog.qq.com/" >博客</a></td> </tr> </table> <!--文章显示区域 --> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fodinfo"> <tr> <td height="88"> <!--新闻 --> <div id="foda4"> <div class="dis" onClick="register0410('game',1)" name="f"> <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200"></td> </tr> </table> </div> <!--博客 --> <div class="undis" onClick="register0410('game',2)" name="f"> <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200"></td> </tr> </table> </div> </div> </td> </tr> </table> </td> </tr> </table>