超酷JS+CSS动感鼠标特效菜单，竖向排列

2024-09-05 12:19:57

字体：大中小

来源：转载

供稿：网友

本菜单作者：林依晨。
　　写的很酷的菜单，酷在鼠标由上到下滑过菜单，不知道妙在何处的朋友可以先运行一下：将你的鼠标放在最开始的一个菜单上，然后依次向下滑动鼠标，炫丽的效果是不是出来了？当你停留在某一菜单的时候，它也是带有动画效果的。

<!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><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>林依晨鼠标特效菜单</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>[G]ALLERY 我的相册</li>          <li>[F]ORUM 源码交流区</li>          <li>[B]LOG 官方博客</li>          <li>[N]EWS 最新资讯</li>        </ul>  </body></html>

上一篇：B2B网站上常用的TAB选项卡

下一篇：CSS用滤镜打造的椭圆型导航菜单