每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>菜单导航特效代码>

收藏分享查看评论菜单导航

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

查看演示效果

特效Tag：竖向菜单动感鼠标添加

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

<!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="mrc-type" mrc="text/html; charset=utf-8">
<title>林依晨鼠标殊效菜单-mb5u.com</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="/" title="mb5u.com" accesskey="m">模板无忧</a></li>
          <li><a href="/" title="我的生活照片" accesskey="g">[G]ALLERY 我的相册</a></li>
          <li><a href="http://mb5u.com" 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>

所属频道：菜单导航特效/更新时间：2012-10-25

[收藏][报错][返回列表]

相关菜单导航特效：

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索超酷JS+CSS动感鼠标特效菜单，竖向排列
特效说明：
菜单导航模板-超酷JS+CSS动感鼠标特效菜单，竖向排列。