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

具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数，这里我简单设为了一个常量 。

完整的代码为
代码如下:





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)
}