滑动门：JS+CSS仿新浪的滑动门技术
AD: 会员限时优惠仅需29元起，先到先得。【我要上车】
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DIV+CSS仿新浪滑动门技术 AJAX _ 诺豆网 yangjunwei.com</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('/icon/098.gif') no-repeat} .main_tab {BACKGROUND-COLOR: #ffffff} </style> <!--JavaScript部分--> <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> <br /><br /> <body> <p align="center">这里便于演示，只设置了两个栏目切换，你可以根据需要，自行增加栏目！修改CSS使它更适合你的网站<br><br> <a target="_blank" href="http://yangjunwei.com/">有问题请看这里</a></p> <div align="center"> <table border="0" width="200" cellpadding="0" cellspacing="0" style="border-collapse: collapse" height="145" id="table7" bgcolor=#ecf5ff> <tr> <td height="145"> <div align="center"> <table border="0" width="200" cellpadding="0" style="border-collapse: collapse" height="140" id="table107"> <tr> <td height="25"> <div align="center"> <table border="0" width="220" cellpadding="0" style="border-collapse: collapse" 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" style="border-collapse: collapse" height="115"> <TBODY style="DISPLAY: block"><tr> <td height="145"> <div align="center"> <table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138"> <tr> <td height="23" width="15" valign="middle">·</td> <td height="23" width="180"> <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">超酷XP风格网页右键菜单</a></td> </tr> <tr> <td height="23" width="15">·</td> <td height="23" width="180"> <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">通用3级联动菜单</a></td> </tr> <tr> <td height="23" width="15">·</td> <td height="23" width="180"> <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">相当好玩的右键弹出菜单</a></td> </tr> <tr> <td height="23" width="15">·</td> <td height="23" width="180"> <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">用CSS设计的纵向导航条实例</a></td> </tr> <tr> <td height="23" width="15">·</td> <td height="23" width="180"><a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">将网站设为首页的代码</a></td> </tr> <tr> <td height="23" width="195" colspan="2"> <p align="right"><font color="#01499A"> <a target="_blank" href="http://yangjunwei.com/"> <font color="#01499A">更多</font><font color="#01499A" face="Arial">>>></font></a></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" style="border-collapse: collapse" height="138"> <tr> <td height="138" width="195" style="line-height: 150%"> <p> <b> <a target="_blank" href="http://yangjunwei.com/">网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。为网页添加特效，学会添加<a target="_blank" href="http://yangjunwei.com/">网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td></tr></table></div></td></tr></TBODY> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> </body> <br /><br /> <br /><br /> 本代码来源：<a href=http://yangjunwei.com>诺豆网 yangjunwei.com</a> </html>
