超酷超花俏的滑動(dòng)菜單，響應(yīng)鼠標(biāo)滑過(guò)

2024-09-05 12:19:39

字體：大中小

供稿：網(wǎng)友

超級(jí)花俏的菜單，響應(yīng)鼠標(biāo)滑動(dòng)，類似許愿墻一樣，作者附上了豐富的注釋，方便二次修改，用到你的網(wǎng)頁(yè)上一定會(huì)很個(gè)性，不妨好好研究一下，希望你能夠喜歡。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>動(dòng)態(tài)滑動(dòng)菜單</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><SCRIPT language=Jscript>tBack=new Array(24); //記錄條數(shù)tOut=new Array(24);//激活當(dāng)前選項(xiàng)卡function menuOut(whichMenu){var curMenu=eval("menu"+whichMenu);curMenu.runtimeStyle.zIndex=24; //主記錄條數(shù)clearTimeout(tBack[whichMenu]);moveOut(whichMenu);}//恢復(fù)初始狀態(tài)function menuBack(whichMenu){var curMenu=eval("menu"+whichMenu);curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;clearTimeout(tOut[whichMenu]);moveBack(whichMenu);}//移動(dòng)當(dāng)前選項(xiàng)卡function moveOut(curNum){var curMenu=eval("menu"+curNum);if(curMenu.style.posLeft>0) {curMenu.style.posLeft-=2;tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);}}//移回選項(xiàng)卡function moveBack(curNum){var curMenu=eval("menu"+curNum);if(curMenu.style.posLeft<30) {curMenu.style.posLeft+=2;tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);}}//鼠標(biāo)滑過(guò)時(shí)改變樣式function swapClass(){var o=event.srcElement;if(o.className=="td1") o.className="td2"else if(o.className=="td2") o.className="td1";}document.onmouseover=swapClass;document.onmouseout=swapClass;</SCRIPT><style type="text/css"></style></HEAD><BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"><div   id="iwvjtn8m0"   class=maskl id=menuPosstyle="Z-INDEX: 1; LEFT: 12px; WIDTH: 162px; POSITION: absolute; TOP: 14px; HEIGHT: 261px; visibility: visible;"><div   class="iwvjtn8m0"   id=menu0 onmouseover=menuOut(0)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(0)><div   id="iwvjtn8m0"   class=cardbottom id=Layer0style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> TXT：最簡(jiǎn)單的文本 </TD></TR><TR><TD class=td1 align=left> DOC：Word文檔類型 </TD></TR><TR><TD class=td1 align=left> WPS：WPS文檔類型 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>文本類型</TD></TR></TBODY></TABLE></DIV><div   class="iwvjtn8m0"   id=menu1 onmouseover=menuOut(1)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 18px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(1)><div   id="iwvjtn8m0"   class=cardbottom id=Layer1style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> JPG：照片壓縮格式 </TD></TR><TR><TD class=td1 align=left> GIF：計(jì)算機(jī)圖形格式 </TD></TR><TR><TD class=td1 align=left> PNG：新一代WEB圖形 </TD></TR><TR><TD class=td1 align=left> BMP：位圖格式 </TD></TR><TR><TD class=td1 align=left> TIFF：無(wú)損圖形格式 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>圖像類型</TD></TR></TBODY></TABLE></DIV><div   class="iwvjtn8m0"   id=menu2 onmouseover=menuOut(2)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 36px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(2)><div   id="iwvjtn8m0"   class=cardbottom id=Layer2style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> MOV：QuickTime格式 </TD></TR><TR><TD class=td1 align=left> MPG：電影壓縮格式 </TD></TR><TR><TD class=td1 align=left> RMVB：電影壓縮格式 </TD></TR><TR><TD class=td1 align=left> AVI：Windows動(dòng)畫格式 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>影像類型</TD></TR></TBODY></TABLE></DIV><div   class="iwvjtn8m0"   id=menu3 onmouseover=menuOut(3)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 54px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(3)><div   id="iwvjtn8m0"   class=cardbottom id=Layer3style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> MP3：音樂(lè)壓縮格式 </TD></TR><TR><TD class=td1 align=left> WAV：波形聲音格式 </TD></TR><TR><TD class=td1 align=left> MID：電子音樂(lè)格式 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>音樂(lè)類型</TD></TR></TBODY></TABLE></DIV><div   class="iwvjtn8m0"   id=menu4 onmouseover=menuOut(4)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 72px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(4)><div   id="iwvjtn8m0"   class=cardbottom id=Layer4style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> HTM：超文本格式 </TD></TR><TR><TD class=td1 align=left> ASP：動(dòng)態(tài)網(wǎng)頁(yè)格式 </TD></TR><TR><TD class=td1 align=left> JSP：Java網(wǎng)頁(yè)格式 </TD></TR><TR><TD class=td1 align=left> PHP：動(dòng)態(tài)網(wǎng)頁(yè)格式 </TD></TR><TR><TD class=td1 align=left> CGI：腳本網(wǎng)頁(yè)格式 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>網(wǎng)絡(luò)類型</TD></TR></TBODY></TABLE></DIV><div   class="iwvjtn8m0"   id=menu5 onmouseover=menuOut(5)style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 90px; HEIGHT: 20px; visibility: visible;"onmouseout=menuBack(5)><div   id="iwvjtn8m0"   class=cardbottom id=Layer5style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;"><TABLE width="100%"border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF"><TBODY><TR><TD class=td1 align=left> RAR：文檔壓縮格式 </TD></TR><TR><TD class=td1 align=left> ZIP：精品網(wǎng)頁(yè)特效 </TD></TR><TR><TD class=td1 align=left> ISO：鏡像文件格式 </TD></TR><TR><TD class=td1 align=left> GHO：備份文件格式 </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=130 border=0><TBODY><TR><TD width=14 height=18><IMG height=18src="http://www.aspku.com/texiao/caidan/stang.gif" width=14></TD><TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccffheight=14>壓縮類型</TD></TR></TBODY></TABLE></DIV></DIV></BODY></HTML>

上一篇：仿網(wǎng)易漂亮的TAB選項(xiàng)卡(標(biāo)簽)

下一篇：強(qiáng)烈推薦的一款CSS導(dǎo)航菜單