javascript实现的又一个不错的滑动导航效果

导航,鼠标放上去看看效果

<html> <head> <title>::你会做，我也要会::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">function MM_findObj（n, d） { //v4.01 var p,i,x;if（！d） d=document; if（（p=n.indexOf（"？"））>0&&parent.frames.length） { d=parent.frames[n.substring（p+1）].document; n=n.substring（0,p）;} if（！（x=d[n]）&&d.all） x=d.all[n]; for （i=0;！x&&i<d.forms.length;i++） x=d.forms[i][n]; for（i=0;！x&&d.layers&&i<d.layers.length;i++） x=MM_findObj（n,d.layers[i].document）; if（！x && d.getElementById） x=d.getElementById（n）; return x; } function P7AniMagic（el, x, y, a, b, c, s） { //v2.5 PVIIvar g,elo=el,f="",m=false,d="";x=parseInt（x）;y=parseInt（y）;var t = "g.p7Magic = setTimeout（"P7AniMagic（""+elo+"","; if （（g=MM_findObj（el））！=null） {d=（document.layers）？g:g.style;}else{return;}if （parseInt（s）>0） {eval（t+x+","+y+","+a+","+b+","+c+",0）"," + s+"）"）;return;}var xx=（parseInt（d.left））？parseInt（d.left）:0;var yy=（parseInt（d.top））？parseInt（d.top）:0;if（parseInt（c）==1） {x+=xx;y+=yy;m=true;c=0;}else if （c==2） {m=false;clearTimeout（g.p7Magic）;}else {var i=parseInt（a）; if （eval（g.moved））{clearTimeout（g.p7Magic）;} if （xx<x）{xx+=i;m=true;if（xx>x）{xx=x;}} if （xx>x）{xx-=i;m=true;if（xx<x）{xx=x;}} if （yy<y）{yy+=i;m=true;if（yy>y）{yy=y;}} if （yy>y）{yy-=i;m=true;if（yy<y）{yy=y;}}}if （m） {if（（navigator.appName=="Netscape"） && parseInt（navigator.appVersion）>4）{ xx+="px";yy+="px";} d.left=xx;d.top=yy;g.moved=true;eval（t+x+","+y+","+a+","+b+","+c+",0）","+b+"）"）; }else {g.moved=false;} } //--> </script> <style type="text/css"></style> </head> <body bgcolor="#FFFFFF" text="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr><td align="center" valign="top"><font color="#FFFFFF" onMouseOver="P7AniMagic（"Layer2",210,35,5,30,0,0）" onMouseOut="P7AniMagic（"Layer2",264,59,5,30,0,0）">on1 第一项 第二项 第三项 </font></td> </tr> </table><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td> <font color="#FFFFFF" onMouseOver="P7AniMagic（"Layer3",210,55,5,30,0,0）" onMouseOut="P7AniMagic（"Layer3",264,81,5,30,0,0）">on 2 第一项 第二项 第三项 </font> </td> </tr> </table><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td> <font color="#FFFFFF" onMouseOver="P7AniMagic（"Layer4",210,75,5,30,0,0）" onMouseOut="P7AniMagic（"Layer4",264,102,5,30,0,0）">on 3 第一项 第二项 第三项 </font> </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> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]