改写一个简单的菜单
从 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