<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 (o);
}
var words = ('a');
var size; //Current font size
var od;//Indicate whether it is the same target
var max_size = 40, min_size = 20;//Maximum font and minimum font
var go = 0;//go indicates the animation according to the pointer's orientation, and dT indicates whether the pointer is moving
var xm, xmb, ym, ymb;//Pointer motion and judgment
/*Installation*/
var addEvent = function(o, e, f){
if () {
(e, f, false);
}
else
if () {
('on' + e, f);
}
else {
return false;
}
}
var pxTop = function(o){//Get the y position of the element relative to the entire document
return ? + pxTop() : ;
}
addEvent(document, 'mousemove', function(e){
e = e || ;
ym = ( || ) + ;
if (ym != ymb) {
ymb = ym;
}
od = ? : ( ? : null);
})
var getStyle = function(elem, name){
if ([name]) {
return [name];
}
else
if () {
return [name];
}
else
if ( && ) {
name = (/([A-Z])/g, "-$1");
nmae = ();
var s = (elem, name);
return s ? s : null;
}
else
return null;
}
var test = function(){
for (var i = 0; i < ; i++) {
var p = words[i];
size = parseInt(getStyle(p, "fontSize"));
if (od && == "move") {
if (p != od) {
= "white";
}
= (go * ((ym - pxTop(p)) / (3 * max_size)), min_size) + "px";
= "yellow";
if (go <= max_size) {
go = go + 0.05;
}
}
else {
if (go >= min_size) {
go = go - 0.05;
}
= ((size - 0.05, min_size)) + "px";
= "white";
}
}
}
return {
test: test
}
}()
= function(){
setInterval(, 16)
}
</script>
</head>
<body>
<ul >
<li>
<a href="/tag/scripting" target="_blank" class="move">scripting</a>
</li>
<li>
<a href="/tag/javascript" target="_blank" class="move">javascript</a>
</li>
<li>
<a href="/tag/web" target="_blank" class="move">web</a>
</li>
<li>
<a href="/tag/dhtml" target="_blank" class="move">dhtml</a>
</li>
<li>
<a href="/tag/css" target="_blank" class="move">css</a>
</li>
<li>
<a href="/tag/ajax" target="_blank" class="move">ajax</a>
</li>
<li>
<a href="/tag/programming" target="_blank" class="move">programming</a>
</li>
<li>
<a href="/tag/design" target="_blank" class="move">design</a>
</li>
<li>
<a href="/tag/webdesign" target="_blank" class="move">webdesign</a>
</li>
<li>
<a href="/tag/html" target="_blank" class="move">html</a>
</li>
<li>
<a href="/tag/dom" target="_blank" class="move">dom</a>
</li>
<li>
<a href="/tag/webdev" target="_blank" class="move">webdev</a>
</li>
<li>
<a href="/tag/reference" target="_blank" class="move">reference</a>
</li>
<li>
<a href="/tag/tools" target="_blank" class="move">tools</a>
</li>
<li>
<a href="/tag/tutorial" target="_blank" class="move">tutorial</a>
</li>
<li>
<a href="/tag/xmlhttprequest" target="_blank" class="move">xmlhttprequest</a>
</li>
<li>
<a href="/tag/menu" target="_blank" class="move">menu</a>
</li>
<li>
<a href="/tag/xml" target="_blank" class="move">xml</a>
</li>
<li>
<a href="/tag/library" target="_blank" class="move">library</a>
</li>
<li>
<a href="/tag/development" target="_blank" class="move">development</a>
</li>
</ul>
<!-- <h1 >a</h1> -->
</body>
</html>