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

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

关闭顶部展开顶部

展开边栏关闭边栏

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

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

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

查看演示效果

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

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

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

<!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动感鼠标特效菜单，竖向排列。

閻㈩垱鐡曢～鍡涙⒒椤曗偓椤ｏ拷: 濞寸姭鍋撳☉鏂跨墛濡茬閻㈩垽鎷�; 濠碘€冲€风紞宥夋嚔瀹勬壆绻乁閻㈩垽鎷�; 濠碘€冲€风紞宥夊箥閹勭閻庨潧妫涢悥锟�

闁稿繐鎳庨埀顒傚帶鎼存粓宕濋敓锟�: 闁稿繐鎳庨埀顒€鍚嬬粊锔剧矙鐎ｂ晝鐭欑紓渚婃嫹; 闁衡偓椤栨稑鐦柛婵愪簷缁ㄦ椽寮ㄩ娆戝笡闁哄倻鎳撶槐锟�; 闁哄啰濮风紞澶愭煣鐠轰警娲ゅù锝嗘礀閸樻牠宕愰敓锟�

婵☆垪鍓濆妯兼嫻椤撴繃瀚�: 濠碘€冲€风紞宥囨嫻椤撴繃瀚虫俊顖楀墲濠拷; 婵☆垪鍓濆姗€宕鍏煎€甸柡鍫濈Т婵拷; 婵☆垪鍓濆姗€鏌呴埀顒€鈻庨幑鎰靛殯闁哄嫸鎷�

婵☆垪鍓濆姗€宕ｉ幋婵堫伌: 濠碘€冲€风紞宥夊矗閹存繄顏存俊顖楀墲濠拷; 閻庡厜鍓濋悧鎶藉矗婵犲啫鑵归柤鑺ュ姈閻栵綁宕欓敓锟�; UB闁圭粯鍔楅獮鍥╂嫚鐎涙ɑ顫�

闁艰鲸姊婚柈瀵糕偓骞垮灪濠€锟�: 閻庡箍鍨哄﹢鍢燪; 闁告梻濮风紞澶岀博濞嗗孩鍞夋繛缈犺兌閸忥拷; 缂備焦鐟﹂崹婊勭椤掍礁绲圭€点倝缂氶锟�

©2017 www.mb5u.com婵☆垪鍓濆姗€寮悩鎻掓寘

闁衡偓閹増顥�&闁告帒妫旈棅锟�

QQ缂佸本妞藉Λ锟�闁哄倻澧楀顔碱嚗椤旂厧瑙�闁煎灚宕橀鍡楊嚗椤旂厧瑙�濞存粏妗ㄥЧ澶岀磾閿燂拷鐎殿喒鍋撻煫鍥у暟缂嶏拷闁谎勫劤鐎规娊骞栧⿰鍡橆棏濠㈣泛绉撮崺妤冪磾閹存繃绲�闁哄洦娼欓ˇ锟�...