javascript實現的又一個不錯的滑動導航效果
來源:互聯網
上載者:User
導航,滑鼠放上去看看效果<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><style type="text/css"> <!-- .t { filter: Alpha(Opacity=50)} td { font-size: 12px; line-height: 22px} a:link { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:visited { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:hover { background-color: #FF66FF; height: 20px; width: 61px; border: #FFFFFF; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --> </style><table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"><tr><td align="center" valign="top">on<br /> 1</p><p> 第一項</p><p> 第二項</p><p> 第三項</p><p> </td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>on 2</p><p> 第一項</p><p> 第二項</p><p> 第三項</p><p> </td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>on 3</p><p> 第一項</p><p> 第二項</p><p> 第三項</p><p> </td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0" height="72"><tr><td height="24" onmouseover="P7AniMagic('Layer2',210,35,5,30,0,0)" onmouseout="P7AniMagic('Layer2',264,59,5,30,0,0)"> </td></tr><tr><td height="24" onmouseover="P7AniMagic('Layer3',210,55,5,30,0,0)" onmouseout="P7AniMagic('Layer3',264,81,5,30,0,0)"> </td></tr><tr><td height="24" onmouseover="P7AniMagic('Layer4',210,75,5,30,0,0)" onmouseout="P7AniMagic('Layer4',264,102,5,30,0,0)"> </td></tr></table><p>