蓝色风格的JS+CSS个性菜单代码
代码简介:
CSS+JS个性菜单,还会抖动哦,蓝色风格,代码有点复杂,不是很实用,只为研究一个JS技术吧。
代码内容:
< html > < head > < title >蓝色风格的JS+CSS个性菜单代码_网页代码站(www.webdm.cn)</ title > < style type="text/css"> <!-- .t { filter: Alpha(Opacity=50)} td { font-size: 12px; line-height: 22px} a:link { color: #FFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:visited { color: #FFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:hover { background-color: #FF66FF; height: 20px; width: 61px; border: #FFF; border-style: dotted; border- top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --> </ style > < script language="JavaScript"> <!-- function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape") && (parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_findObj(n, d) { 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 PVII var 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 > </ head > < body > < p >< div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"> < div id="Layer2" style="position:absolute; left:666px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t"> < table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> < tr > < td align="center" valign="top">< font color="#FFFFFF" onMouseOver="P7AniMagic ('Layer2',611,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',666,59,5,30,0,0)">on 1 < a href="#">ASP.NET</ a > < a href="#">DELPHI</ a > < a href="#">VC++</ a > </ td > </ tr > </ table > </ div > < div id="Layer3" style="position:absolute; left:666px; top:81px; width:66px; height:84px; z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible" class="t"> < table width="100%" border="0" cellspacing="0" cellpadding="0"> < tr > < td > < div align="center">< font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',611,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',666,81,5,30,0,0)">on 2 < a href="/">ASP</ a > < a href="#">php</ a > < a href="#">Java</ a > </ div > </ td > </ tr > </ table > </ div > < div id="Layer4" style="position:absolute; width:68px; height:80px; z-index:4; left: 666px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible" class="t"> < table width="100%" border="0" cellspacing="0" cellpadding="0"> < tr > < td > < div align="center">< font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',611,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',666,102,5,30,0,0)">on 3 < a href="/">AJAX</ a > < a href="/">JS</ a > < a href="#">JSP</ a > </ div > </ td > </ tr > </ table > </ div > < div id="Layer5" style="position:absolute; width:65px; height:127px; z-index:5; left: 265px; top: 56px"> < table width="100%" border="0" cellspacing="0" cellpadding="0" height="72"> < tr > < td height="24" onMouseOver="P7AniMagic('Layer2',611,35,5,30,0,0)" onMouseOut="P7AniMagic ('Layer2',666,59,5,30,0,0)"> </ td > </ tr > < tr > < td height="24" onMouseOver="P7AniMagic('Layer3',611,55,5,30,0,0)" onMouseOut="P7AniMagic ('Layer3',666,81,5,30,0,0)"> </ td > </ tr > < tr > < td height="24" onMouseOver="P7AniMagic('Layer4',611,75,5,30,0,0)" onMouseOut="P7AniMagic ('Layer4',666,102,5,30,0,0)"> </ td > </ tr > </ table > </ div > </ div > </ body > </ html > < br > < p >< a href="http://www.webdm.cn">网页代码站</ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</ p > |
代码来自:http://www.webdm.cn/webcode/7c29e31d-df79-4eda-8dd0-0b2c17baa300.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步