首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
导航菜单
> 正文
鼠标移过放大的JS动态菜单
2009-11-24 导航菜单 230℃
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>www</title> <style type="text/css"> html { overflow: hidden; } body { background: #222; } #menu { padding: 10px; background: #000; height: 300px; width: 400px; } #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://del.icio.us/tag/scripting">scripting</a> <a href="http://del.icio.us/tag/javascript">javascript</a> <a href="http://del.icio.us/tag/web">web</a> <a href="http://del.icio.us/tag/dhtml">dhtml</a> <a href="http://del.icio.us/tag/css">css</a> <a href="http://del.icio.us/tag/ajax">ajax</a> <a href="http://del.icio.us/tag/programming">programming</a> <a href="http://del.icio.us/tag/design">design</a> <a href="http://del.icio.us/tag/webdesign">webdesign</a> <a href="http://del.icio.us/tag/html">html</a> <a href="http://del.icio.us/tag/dom">dom</a> <a href="http://del.icio.us/tag/webdev">webdev</a> <a href="http://del.icio.us/tag/reference">reference</a> <a href="http://del.icio.us/tag/tools">tools</a> <a href="http://del.icio.us/tag/tutorial">tutorial</a> <a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a> <a href="http://del.icio.us/tag/menu">menu</a> <a href="http://del.icio.us/tag/xml">xml</a> <a href="http://del.icio.us/tag/library">library</a> <a href="http://del.icio.us/tag/development">development</a> </div> <p>查找更多代码，请访问：<a href="#" target="_blank">网页特效资料库www.zlcool.com</a></p> </body> </html>
相关特效代码
无相关信息
热门特效代码
三级竖向展开/收缩导航菜单
鼠标指向弹出菜单
jQuery 弹出菜单层
CSS二级下拉导航菜单
CSS做的垂直导航菜单效果
横向二级导航菜单
仿google首页下端图片文字动画导
导航链接菜单间隔闪烁
动态翻滚的导航条[酷比flash]
纯CSS的三级联动级联菜单
推荐特效代码
CSS+div+js组合强大实现超酷菜单
动态翻滚的导航条[酷比flash]
CSS横向下拉菜单
微软风格的CSS横向菜单
立体的CSS按钮菜单效果
左侧隐藏的菜单
