从 http://www.dhteumeuleu.com/dhtml/M6-menu.html 看到一个简单的菜单样式，由于是作者比较早的作品，视觉效果不太好，有点突兀
自己做了一点小修改，模仿icon动画的效果(区别的关键点是getStyle取得当前计算样式这个函数) :
由于博客园内置的css,我加入了很多无关的嵌入的style语句,请对照下面列出的代码,而不要通过源代码来查看.ie浏览器下动画有点失帧，调试了半天找不到解决的方法，有好心人可以帮我检查下，本地运行IE也正常，上传到博客园就失帧了。
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数 具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数，这里我简单设为了一个常量 。
完整的代码为
代码
1 <html>
2 <head>
3 <title>menu list</title>
4 <style type="text/css">
5 html {
6 overflow: hidden;
7 }
8
9 body {
10 background-color: #111111;
11 color: #eee;
12 }
13
14 ul#menu {
15 position: absolute;
16 left: 40%;
17 }
18
19 li {
20 list-style: none;
21 padding: 0px;
22 margin: 1px;
23 }
24
25 a {
26 text-decoration: none;
27 font-family: arial, helvetica, verdana, sans-serif;
28 color: #fff;
29 font-size: 20px;
30 }
31 </style>
32 <script type="text/javascript">
33 var menu = function(){
34 var $ = function(o){
35 return document.getElementById(o);
36 }
37 var words = document.getElementsByTagName('a');
38 var size; //当前字体大小
39 var od;//指示是否为同一目标
40 var max_size = 40, min_size = 20;//最大字体与最小字体
41 var go = 0;//go指示根据指针方位的动画 ,dT指示指针是否在移动
42 var xm, xmb, ym, ymb;//指针运动与判定
43 /*入库*/
44 var addEvent = function(o, e, f){
45 if (window.addEventListener) {
46 o.addEventListener(e, f, false);
47 }
48 else
49 if (window.attachEvent) {
50 o.attachEvent('on' + e, f);
51 }
52 else {
53 return false;
54 }
55 }
56 var pxTop = function(o){//获取元素相对整个文档的y位置
57 return o.offsetParent ? o.offsetTop + pxTop(o.offsetParent) : o.offsetTop;
58 }
59 addEvent(document, 'mousemove', function(e){
60 e = e || window.event;
61 ym = (e.clientY || e.y) + document.body.scrollTop;
62 if (ym != ymb) {
63 ymb = ym;
64 }
65 od = e.target ? e.target : (e.srcElement ? e.srcElement : null);
66 })
67 var getStyle = function(elem, name){
68 if (elem.style[name]) {
69 return elem.style[name];
70 }
71 else
72 if (elem.currentStyle) {
73 return elem.currentStyle[name];
74 }
75 else
76 if (document.defaultValue && document.defaultValue.getComputedStyle) {
77 name = name.replace(/([A-Z])/g, "-$1");
78 nmae = name.toLowerCase();
79 var s = document.defaultValue.getComputedStyle(elem, name);
80 return s ? s : null;
81 }
82 else
83 return null;
84 }
85 var test = function(){
86 for (var i = 0; i < words.length; i++) {
87 var p = words[i];
88 size = parseInt(getStyle(p, "fontSize"));
89 if (od && od.className == "move") {
90 if (p != od) {
91 p.style.color = "white";
92
93 }
94 p.style.fontSize = Math.max(go * Math.cos((ym - pxTop(p)) / (3 * max_size)), min_size) + "px";
95 od.style.color = "yellow";
96
97 if (go <= max_size) {
98 go = go + 0.05;
99 }
100 }
101 else {
102 if (go >= min_size) {
103 go = go - 0.05;
104 }
105
106 p.style.fontSize = (Math.max(size - 0.05, min_size)) + "px";
107 p.style.color = "white";
108
109 }
110 }
111 }
112 return {
113 test: test
114 }
115 }()
116 window.onload = function(){
117 setInterval(menu.test, 16)
118 }
119 </script>
120 </head>
121 <body>
122 <ul id="menu">
123 <li>
124 <a href="http://del.icio.us/tag/scripting" target="_blank" class="move">scripting</a>
125 </li>
126 <li>
127 <a href="http://del.icio.us/tag/javascript" target="_blank" class="move">javascript</a>
128 </li>
129 <li>
130 <a href="http://del.icio.us/tag/web" target="_blank" class="move">web</a>
131 </li>
132 <li>
133 <a href="http://del.icio.us/tag/dhtml" target="_blank" class="move">dhtml</a>
134 </li>
135 <li>
136 <a href="http://del.icio.us/tag/css" target="_blank" class="move">css</a>
137 </li>
138 <li>
139 <a href="http://del.icio.us/tag/ajax" target="_blank" class="move">ajax</a>
140 </li>
141 <li>
142 <a href="http://del.icio.us/tag/programming" target="_blank" class="move">programming</a>
143 </li>
144 <li>
145 <a href="http://del.icio.us/tag/design" target="_blank" class="move">design</a>
146 </li>
147 <li>
148 <a href="http://del.icio.us/tag/webdesign" target="_blank" class="move">webdesign</a>
149 </li>
150 <li>
151 <a href="http://del.icio.us/tag/html" target="_blank" class="move">html</a>
152 </li>
153 <li>
154 <a href="http://del.icio.us/tag/dom" target="_blank" class="move">dom</a>
155 </li>
156 <li>
157 <a href="http://del.icio.us/tag/webdev" target="_blank" class="move">webdev</a>
158 </li>
159 <li>
160 <a href="http://del.icio.us/tag/reference" target="_blank" class="move">reference</a>
161 </li>
162 <li>
163 <a href="http://del.icio.us/tag/tools" target="_blank" class="move">tools</a>
164 </li>
165 <li>
166 <a href="http://del.icio.us/tag/tutorial" target="_blank" class="move">tutorial</a>
167 </li>
168 <li>
169 <a href="http://del.icio.us/tag/xmlhttprequest" target="_blank" class="move">xmlhttprequest</a>
170 </li>
171 <li>
172 <a href="http://del.icio.us/tag/menu" target="_blank" class="move">menu</a>
173 </li>
174 <li>
175 <a href="http://del.icio.us/tag/xml" target="_blank" class="move">xml</a>
176 </li>
177 <li>
178 <a href="http://del.icio.us/tag/library" target="_blank" class="move">library</a>
179 </li>
180 <li>
181 <a href="http://del.icio.us/tag/development" target="_blank" class="move">development</a>
182 </li>
183 </ul>
184 <!-- <h1 id="test">a</h1> -->
185 </body>
186 </html>
187
