改写一个简单的菜单弹性大小

这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数，这里我简单设为了一个常量。完整的代码为复制代码代码如下: <html> <head> <title>menu list</title> <style type="text/css"> html { overflow: hidden; } body { background-color: #111111; color: #eee; } ul#menu { position: absolute; left: 40%; } li { list-style: none; padding: 0px; margin: 1px; } a { text-decoration: none; font-family: arial, helvetica, verdana, sans-serif; color: #fff; font-size: 20px; } </style> <script type="text/javascript"> var menu = function(){ var $ = function(o){ return document.getElementById(o); } var words = document.getElementsByTagName('a'); var size; //当前字体大小 var od;//指示是否为同一目标 var max_size = 40, min_size = 20;//最大字体与最小字体 var go = 0;//go指示根据指针方位的动画 ,dT指示指针是否在移动 var xm, xmb, ym, ymb;//指针运动与判定 /*入库*/ var addEvent = function(o, e, f){ if (window.addEventListener) { o.addEventListener(e, f, false); } else if (window.attachEvent) { o.attachEvent('on' + e, f); } else { return false; } } var pxTop = function(o){//获取元素相对整个文档的y位置 return o.offsetParent ? o.offsetTop + pxTop(o.offsetParent) : o.offsetTop; } addEvent(document, 'mousemove', function(e){ e = e || window.event; ym = (e.clientY || e.y) + document.body.scrollTop; if (ym != ymb) { ymb = ym; } od = e.target ? e.target : (e.srcElement ? e.srcElement : null); }) var getStyle = function(elem, name){ if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultValue && document.defaultValue.getComputedStyle) { name = name.replace(/([A-Z])/g, "-$1"); nmae = name.toLowerCase(); var s = document.defaultValue.getComputedStyle(elem, name); return s ? s : null; } else return null; } var test = function(){ for (var i = 0; i < words.length; i++) { var p = words[i]; size = parseInt(getStyle(p, "fontSize")); if (od && od.className == "move") { if (p != od) { p.style.color = "white"; } p.style.fontSize = Math.max(go * Math.cos((ym - pxTop(p)) / (3 * max_size)), min_size) + "px"; od.style.color = "yellow"; if (go <= max_size) { go = go + 0.05; } } else { if (go >= min_size) { go = go - 0.05; } p.style.fontSize = (Math.max(size - 0.05, min_size)) + "px"; p.style.color = "white"; } } } return { test: test } }() window.onload = function(){ setInterval(menu.test, 16) } </script> </head> <body> <ul id="menu"> <li> <a href="http://del.icio.us/tag/scripting" target="_blank" class="move">scripting</a> </li> <li> <a href="http://del.icio.us/tag/javascript" target="_blank" class="move">javascript</a> </li> <li> <a href="http://del.icio.us/tag/web" target="_blank" class="move">web</a> </li> <li> <a href="http://del.icio.us/tag/dhtml" target="_blank" class="move">dhtml</a> </li> <li> <a href="http://del.icio.us/tag/css" target="_blank" class="move">css</a> </li> <li> <a href="http://del.icio.us/tag/ajax" target="_blank" class="move">ajax</a> </li> <li> <a href="http://del.icio.us/tag/programming" target="_blank" class="move">programming</a> </li> <li> <a href="http://del.icio.us/tag/design" target="_blank" class="move">design</a> </li> <li> <a href="http://del.icio.us/tag/webdesign" target="_blank" class="move">webdesign</a> </li> <li> <a href="http://del.icio.us/tag/html" target="_blank" class="move">html</a> </li> <li> <a href="http://del.icio.us/tag/dom" target="_blank" class="move">dom</a> </li> <li> <a href="http://del.icio.us/tag/webdev" target="_blank" class="move">webdev</a> </li> <li> <a href="http://del.icio.us/tag/reference" target="_blank" class="move">reference</a> </li> <li> <a href="http://del.icio.us/tag/tools" target="_blank" class="move">tools</a> </li> <li> <a href="http://del.icio.us/tag/tutorial" target="_blank" class="move">tutorial</a> </li> <li> <a href="http://del.icio.us/tag/xmlhttprequest" target="_blank" class="move">xmlhttprequest</a> </li> <li> <a href="http://del.icio.us/tag/menu" target="_blank" class="move">menu</a> </li> <li> <a href="http://del.icio.us/tag/xml" target="_blank" class="move">xml</a> </li> <li> <a href="http://del.icio.us/tag/library" target="_blank" class="move">library</a> </li> <li> <a href="http://del.icio.us/tag/development" target="_blank" class="move">development</a> </li> </ul>  </body> </html> 演示代码：http://demo.jb51.net/js/caidan/js_caidan.htm

　　推荐阅读

　　基于jquery的finkyUI插件与Ajax实现页面数据加载功能

复制代码代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript" src="js/jquery.funkyUI.js"></s>>>详细阅读

本文标题：改写一个简单的菜单弹性大小

地址：http://www.17bianji.com/kaifa2/JS/25281.html

1/2 1

改写一个简单的菜单 弹性大小

改写一个简单的菜单弹性大小