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