js随鼠标移过动态放大的菜单导航
2011-06-05 07:48
176 查看
代码简介:
代码内容:
代码来自:http://www.webdm.cn/webcode/4cb7ae8f-6080-41ee-b5ee-128793c84c04.html
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js随鼠标移过动态放大的菜单导航_网页代码站(www.webdm.cn)</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="/">scripting</a> <a href="/">javascript</a> <a href="/">web</a> <a href="/">dhtml</a> <a href="/">css</a> <a href="/">ajax</a> <a href="/">programming</a> <a href="/">design</a> <a href="/">webdesign</a> <a href="/">html</a> <a href="/">dom</a> <a href="/">webdev</a> <a href="/">reference</a> <a href="/">tools</a> <a href="/">tutorial</a> <a href="/">xmlhttprequest</a> <a href="/">menu</a> <a href="/">xml</a> <a href="/">library</a> <a href="/">development</a> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/4cb7ae8f-6080-41ee-b5ee-128793c84c04.html
相关文章推荐
- js鼠标滑过导航菜单出现相应的内容
- JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航
- js实现简单的隐藏导航菜单动态显示
- js鼠标移动导航菜单出现下拉菜单
- js鼠标滚动到某个位置导航菜单显示
- js实现的动画导航菜单效果代码
- JQuery实现图片放大的动态菜单效果
- js、jq实现导航菜单
- 利用Js+Css实现折纸动态导航效果实例源码
- JS实现Fisheye效果动感放大菜单代码
- js 区分鼠标点的是左键还是右键以及屏蔽右键菜单
- JS+CSS组合的精彩漂亮的导航菜单代码
- js脚本 随鼠标事件动态显示控件
- 原创JS图片放大效果(二) — 多图点击切换,鼠标移上放大 代码很美,步履不停
- Slideout.js – 触摸滑出式 Web App 导航菜单
- js实现的黑背景灰色二级导航菜单效果代码
- .NET鼠标右键菜单JS[原]
- JS 实现导航菜单中的二级下拉菜单的几种方式
- 实用js+css多级树形展开效果导航菜单
- 自动收缩的JS+CSS三级折叠导航菜单