快捷導(dǎo)航

改寫一個簡單的菜單彈性大小

更新時間：2010年12月02日 13:33:02 作者：

看到一個簡單的菜單樣式，由于是作者比較早的作品，視覺效果不太好，有點(diǎn)突兀自己做了一點(diǎn)小修改，模仿icon動畫的效果(區(qū)別的關(guān)鍵點(diǎn)是getStyle取得當(dāng)前計算樣式這個函數(shù))

這里有一個小說明就是,是關(guān)于動態(tài)設(shè)置字體大小的函數(shù),由于不考慮3D菜單的形式,我簡單采用了余弦函數(shù)

具體實(shí)現(xiàn)時，為了不在整個菜單總高度中出現(xiàn)兩個波峰而產(chǎn)生突兀感，事實(shí)上cos(x/K)中的K應(yīng)該是一個與菜單條目數(shù)量以及最大字體值有關(guān)的函數(shù)，這里我簡單設(shè)為了一個常量。

完整的代碼為

復(fù)制代碼代碼如下:

 
<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; //當(dāng)前字體大小 
var od;//指示是否為同一目標(biāo) 
var max_size = 40, min_size = 20;//最大字體與最小字體 
var go = 0;//go指示根據(jù)指針方位的動畫 ,dT指示指針是否在移動 
var xm, xmb, ym, ymb;//指針運(yùn)動與判定 
/*入庫*/ 
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  target="_blank" class="move">scripting</a> 
</li> 
<li> 
<a  target="_blank" class="move">javascript</a> 
</li> 
<li> 
<a  target="_blank" class="move">web</a> 
</li> 
<li> 
<a  target="_blank" class="move">dhtml</a> 
</li> 
<li> 
<a  target="_blank" class="move">css</a> 
</li> 
<li> 
<a  target="_blank" class="move">ajax</a> 
</li> 
<li> 
<a  target="_blank" class="move">programming</a> 
</li> 
<li> 
<a  target="_blank" class="move">design</a> 
</li> 
<li> 
<a  target="_blank" class="move">webdesign</a> 
</li> 
<li> 
<a  target="_blank" class="move">html</a> 
</li> 
<li> 
<a  target="_blank" class="move">dom</a> 
</li> 
<li> 
<a  target="_blank" class="move">webdev</a> 
</li> 
<li> 
<a  target="_blank" class="move">reference</a> 
</li> 
<li> 
<a  target="_blank" class="move">tools</a> 
</li> 
<li> 
<a  target="_blank" class="move">tutorial</a> 
</li> 
<li> 
<a  target="_blank" class="move">xmlhttprequest</a> 
</li> 
<li> 
<a  target="_blank" class="move">menu</a> 
</li> 
<li> 
<a  target="_blank" class="move">xml</a> 
</li> 
<li> 
<a  target="_blank" class="move">library</a> 
</li> 
<li> 
<a  target="_blank" class="move">development</a> 
</li> 
</ul> 
<!-- <h1 id="test">a</h1> --> 
</body> 
</html> 