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

237 阅读 0 评论 157 点赞

我是靠谱客的博主体贴朋友，最近开发中收集的这篇文章主要介绍改写一个简单的菜单弹性大小，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑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> 
<!-- <h1 id="test">a</h1> --> 
</body> 
</html> 