代码简介:
一款动感十足的仿FLASH菜单,当鼠标滑过菜单某一项的时候,该项会自动变大,其它菜单则减小,如果鼠标滑过的速度很快,那这款菜单就会出现操作感极强的菜单效果,不明白的可运行一下代码便知。
代码内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>仿FLASH动感十足鼠标滑过放大的菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> html { overflow: hidden; } body { background: #333; } #menu { padding: 10px; background: #111; height: 298px; 398px; } #menu a { display:block; text-decoration:none; /*/*/ font-family: arial, helvetica, verdana, sans-serif; white-space: nowrap; } </style> <script type="text/javascript"><!-- var P,T; var over = -1; var fontSize = 38; var lensFX = 1; var num = true; var color = "#FFF"; var selected = "#F80"; function zoom(s){ if(s!=over){ over = s; for(var i=0;i<T;i++){ P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px"; P[i].style.color=(i==s)?selected:color; } } } onload = function(){ P = document.getElementById("menu").getElementsByTagName("a"); T = P.length; for (var i=0;i<T;i++){ if(num){ x=i+"."; if(x.length<3)x="0"+x; P[i].innerHTML = x+P[i].innerHTML; } P[i].style.width = "100%";/*/*/ P[i].onmouseover=new Function("zoom("+i+");"); } zoom(0); } //--> </script> </head> <body> <div id="menu"> <a href="http://www.webdm.cn">网页代码站</a> <a href="/">ASP</a> <a href="/">PHP</a> <a href="/">.NET</a> <a href="/">C#</a> <a href="http://www.webdm.cn">JSP</a> <a href="/">Java</a> <a href="/">VC/C++</a> <a href="/">VB</a> <a href="/">Delphi</a> <a href="/">Ajax</a> <a href="/">脚本资源</a> <a href="/">电子书籍</a> <a href="/">方案及文档</a> <a href="/">工具软件</a> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/accc6ccd-4ca6-4ca4-8b92-ebe64cbb64fc.html