Here is a small note is about the dynamic font size function, because regardless of the form of the 3D menu, I simply adopted the cosine function
When implemented, in order not to appear in the entire menu total height of two peaks and create an abrupt feeling, in fact cos (x/k) in the K should be a number of menu items and the maximum font value of the function, here I simply set for a constant.
<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; Current font Size
Var od;//indicates whether the target is the same
var max_size = min_size = 20;//max font and minimum font
var go = 0;//go Indicates an animation based on the direction of the pointer, DT indicates whether the pointer is moving
var xm, XMB, YM, ymb;//pointer motion and judgment
/* Warehousing * *
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) {//Get the y position of the element relative to the entire document
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>
<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>
