超个性的导航效果

超个性的导航效果，

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>测试效果</title> <style type="text/css"></style> <script language="javascript"> window.onload=function（）{ var t=document.getElementsByTagName（"table"）[0]; var cs=t.rows[1].cells,ct=t.rows[0].cells; for（var i=0;i<cs.length;i++） cssAni（cs[i],ct[i],7）; } function cssAni（osrc,otarget,num,duration）{ var t=null,c=1,d=0,n=0,i=Math.floor（（duration||300）/num）; var s=otarget.className.replace（/.$/,""）,r=/over/; osrc.onmouseover=osrc.onmouseout=function（e）{ n=r.test（（e||event）.type）？1:-1; if（！t） t=setInterval（function（）{ if（（c==1||c==num）&&（（d==n||c+n<1）||！（d=n））） return clearInterval（t）,t=null; otarget.className=s+（c+=d）; },i）; }; } </script> </head> <body> <table> <tr class="icon"> <td class="a f1"></td> <td class="b f1"></td> <td class="c f1"></td> <td class="d f1"></td> <td class="e f1"></td> <td class="f f1"></td> <td class="g f1"></td> </tr> <tr class="capt"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> </table> </body> </html>

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