模仿Flash AS效果的導航菜單

2019-11-21 02:16:52

字體：大中小

來源：轉載

供稿：網友

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模仿Flash AS效果的導航菜單</title> <style type="text/css">  </style> <script type="text/javascript"> lastNo=0 function re(menu_no){ if(lastNo!=menu_no){ cur=menu_no+1 lastNo=menu_no rest() }else{ cur=100 } document.getElementById("board"+menu_no).style.visibility="visible" } function rest(){ for(i=1;i<=4;i++){ document.getElementById("hor"+i).style.top=20*i; document.getElementById("board"+i).style.visibility="hidden" } menu_num=4; act=1 height=120+20 speed=0; posY=0; } function huke(){ if(act==1&&cur<100){ speed=(height-posY)*0.69+speed*0.6 posY+=speed for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=posY+(i-2)*20 } if(Math.abs(height-posY)<0.5){ for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=height+(i-2)*20 } act=0 } setTimeout("huke()",50) } } </script> </head> <body> <div   class="iwvjtn8m0"   id="hor1" onclick="re(1);huke()">News</div> <div   class="iwvjtn8m0"   id="hor2" onclick="re(2);huke()">Populor</div> <div   class="iwvjtn8m0"   id="hor3" onclick="re(3);huke()">Sports</div> <div   class="iwvjtn8m0"   id="hor4" onclick="re(4);huke()">Woman</div> <div   class="iwvjtn8m0"   id="board1">1.由AS而想起Javascript2.用Jscript寫ASP有沒有先天性的不足？3.沒有了。</div> <div   class="iwvjtn8m0"   id="board2">1.xhtml+css真的來了嗎？2.Flash取代傳統網站3.Flash何時才能連接數據庫？</div> <div   class="iwvjtn8m0"   id="board3">1.程序員與小姐的10個相同。2.中國的程序員與中國的足球？</div> <div   class="iwvjtn8m0"   id="board4">1.二十一世紀最缺的是什么?人才 <a href="<a  target="_blank">http://linkweb.cn/js</a>" target="_blank"><a  target="_blank">http://linkweb.cn/js</a></a></div> </body> </html>

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

上一篇：頁面自定義拖拽布局

下一篇：jQuery中文入門指南，翻譯加實例，jQuery的起點教程