JavaScript打造超酷很动感的鼠标特效菜单
代码简介：
本菜单作者：林依晨。 写的很酷的菜单，酷在鼠标由上到下滑过菜单，不知道妙在何处的朋友可以先运行一下：将你的鼠标放在最开始的一个菜单上，然后依次向下滑动鼠标，炫丽的效果是不是出来了？当你停留在某一菜单的时候，它也是带有动画效果的。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript打造超酷很动感的鼠标特效菜单_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body, body div, body p, body th, body td, body li, body dd {
font-size: small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: x-small
}
html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
font-size: small
}
body {
font-family: verdana,arial,helvetica,sans-serif;
font-size: 10px;
text-align: center;
}
#Main {
padding-top: 50px;
margin-left: 250px;
width: 300px;
}
#fancyMenu {
position:relative;
width:250px;
margin:0 auto;
padding:0;
font:0.6em verdana,arial,helvetica;
text-transform:uppercase;
}
#fancyMenu li {
position:relative;
padding:2px 2px 2px 6px;
width:240px;
border:1px solid #000;
list-style-type:none;
margin:2px 0 0 0;
}
#fancyMenu li a {
position:relative;
display:inline-block;
width:100%;
height:100%;
color:#525B53;
text-decoration:none;
z-index:10;
margin:0;
}
#fancyMenu li>a {
display:block;
}
#fancyMenu li a:hover {
color:#FFF;
}
.expander {
position:absolute;
background-color:#000;
width:250px;
left:0px;
height:1px;
z-index:0;
display:none;
padding:0;
font-size:1px;
margin:0;
}
.valid {
font-size:10pt;
}
</style>
<script>
var d=document;
var fm_textValues = new Array();
var fm_activeLI = new Array();
var fm_expandObj = new Array();
var fm_liObj;
var zInterval = new Array();
var kInterval = new Array();
var fm_curOpacity = new Array();
var fm_doFade = new Array();
var fm_doExpansion = new Array();
var fm_stringIndex = new Array();
function fm_init(){if(!d.getElementById)return;
ulObj=d.getElementById("fancyMenu");
fm_liObj=ulObj.getElementsByTagName("li");
for(i=0;i<fm_liObj.length;i++) {
fm_liObj[i].xindex = i;
aObj = fm_liObj[i].getElementsByTagName("a")[0];
aObj.onmouseover = function() { fm_handleMouseOver(this.parentNode.xindex); }
aObj.onmouseout = function() { fm_handleMouseOut(this.parentNode.xindex); }
fm_textValues[i] = aObj.innerHTML;
fm_expandObj[i] = fm_liObj[i].appendChild(d.createElement("div"));
fm_expandObj[i].className = "expander";
fm_expandObj[i].style.top = fm_liObj[i].offsetHeight/2 + "px";
fm_expandObj[i].xindex = i;
zInterval[i] = null; kInterval[i] = null;
fm_stringIndex[i] = 1;
fm_curOpacity[i] = 100;
fm_activeLI[i] = 0;}}
function fm_handleMouseOver(objIndex) {
if(fm_activeLI[objIndex])return;
fm_activeLI[objIndex]=1;
fm_expandObj[objIndex].style.display = "block";
fm_expandObj[objIndex].style.height = "1px";
fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2+"px";
fm_doExpansion[objIndex] = function() { fm_expandDIV(objIndex); }
zInterval[objIndex] = setInterval(fm_doExpansion[objIndex],10);
}
function fm_handleMouseOut(objIndex) {
if(kInterval[objIndex] != null) return;
aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
aObj.innerHTML = "";
aObj.innerHTML = fm_textValues[objIndex].substring(0,1);
fm_doFade[objIndex] = function() { fm_fadeExpander(objIndex); }
kInterval[objIndex] = setInterval(fm_doFade[objIndex],10);
}
function fm_expandDIV(objIndex) {
h = new Array(); y = new Array();
if(fm_expandObj[objIndex].offsetTop>=0) {
h[objIndex] = fm_expandObj[objIndex].offsetHeight;
y[objIndex] = fm_expandObj[objIndex].offsetTop;
if(h[objIndex]<fm_liObj[objIndex].offsetHeight)h[objIndex]+=2;
y[objIndex]--;
fm_expandObj[objIndex].style.top = y[objIndex]+"px";
fm_expandObj[objIndex].style.height = h[objIndex]+"px";
} else {
clearInterval(zInterval[objIndex]);
fm_doExpansion[objIndex]=null;
zInterval[objIndex] = null;}}
function fm_fadeExpander(objIndex) {
fm_curOpacity[objIndex]=d.all?fm_curOpacity[objIndex]:fm_curOpacity[objIndex]/100;
fm_curOpacity[objIndex]-=d.all?5:0.05;
fm_expandObj[objIndex].style.opacity = fm_curOpacity[objIndex];
fm_expandObj[objIndex].style.MozOpacity = fm_curOpacity[objIndex];
fm_expandObj[objIndex].style.filter="alpha(opacity=" + fm_curOpacity[objIndex] + ")";
aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
if(fm_curOpacity[objIndex]<(d.all?60:0.6)) {
aObj.appendChild(d.createTextNode(fm_textValues[objIndex].charAt(fm_stringIndex[objIndex])));
fm_stringIndex[objIndex]++;}
if(fm_curOpacity[objIndex]<=0 && aObj.innerHTML==fm_textValues[objIndex]) {
clearInterval(kInterval[objIndex]);
kInterval[objIndex] = null;
fm_expandObj[objIndex].style.display = "none";
fm_expandObj[objIndex].style.opacity = 0.99;
fm_expandObj[objIndex].style.MozOpacity = 0.99;
fm_expandObj[objIndex].style.filter="alpha(opacity=100)";
fm_expandObj[objIndex].style.height = "1px";
fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2 + "px";
fm_activeLI[objIndex]=0;
fm_curOpacity[objIndex] = 100;
fm_stringIndex[objIndex] = 1;
return;}
if(!d.all)fm_curOpacity[objIndex]*=100;}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", fm_init, null);}
window.onload = fm_init;
</script>
</head>
<body>
<ul id="fancyMenu" >
<li><a href="http://www.webdm.cn" title="webdm.cn" accesskey="m">网页代码站</a></li>
<li><a href="/" title="我的生活照片" accesskey="g">[G]ALLERY 我的相册</a></li>
<li><a href="http://www.webdm.cn" title="交流区" accesskey="f">[F]ORUM 源码交流区</a></li>
<li><a href="/" title="我的官方博客" accesskey="a">[B]LOG 官方博客</a></li>
<li><a href="/" title="最新资讯信息" accesskey="n">[N]EWS 最新资讯</a></li>
</ul>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/82ee9973-fd0c-4468-9c0d-14d5764c0d4f.html
