超酷超花俏的滑动菜单，响应鼠标滑过

2024-09-05 12:19:39

字体：大中小

来源：转载

供稿：网友

超级花俏的菜单，响应鼠标滑动，类似许愿墙一样，作者附上了丰富的注释，方便二次修改，用到你的网页上一定会很个性，不妨好好研究一下，希望你能够喜欢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>动态滑动菜单</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><SCRIPT language=Jscript>tBack=new Array(24); //记录条数tOut=new Array(24);//激活当前选项卡function menuOut(whichMenu){var curMenu=eval("menu"+whichMenu);curMenu.runtimeStyle.zIndex=24; //主记录条数clearTimeout(tBack[whichMenu]);moveOut(whichMenu);}//恢复初始状态function menuBack(whichMenu){var curMenu=eval("menu"+whichMenu);curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;clearTimeout(tOut[whichMenu]);moveBack(whichMenu);}//移动当前选项卡function moveOut(curNum){var curMenu=eval("menu"+curNum);if(curMenu.style.posLeft>0) {curMenu.style.posLeft-=2;tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);}}//移回选项卡function moveBack(curNum){var curMenu=eval("menu"+curNum);if(curMenu.style.posLeft<30) {curMenu.style.posLeft+=2;tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);}}//鼠标滑过时改变样式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 class=maskl id=menuPosstyle="Z-INDEX: 1; LEFT: 12px; WIDTH: 162px; POSITION: absolute; TOP: 14px; HEIGHT: 261px; visibility: visible;"><DIV 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 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：最简单的文本 </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 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 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：计算机图形格式 </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：无损图形格式 </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 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 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动画格式 </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 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 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：音乐压缩格式 </TD></TR><TR><TD class=td1 align=left> WAV：波形声音格式 </TD></TR><TR><TD class=td1 align=left> MID：电子音乐格式 </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 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 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：动态网页格式 </TD></TR><TR><TD class=td1 align=left> JSP：Java网页格式 </TD></TR><TR><TD class=td1 align=left> PHP：动态网页格式 </TD></TR><TR><TD class=td1 align=left> CGI：脚本网页格式 </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 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 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：精品网页特效 </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>

上一篇：仿网易漂亮的TAB选项卡(标签)

下一篇：强烈推荐的一款CSS导航菜单