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

 首页 > 网页特效 > 菜单特效 > 超酷JS+CSS动感鼠标特效菜单，竖向排列

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

 2018-07-14  462  收藏  0 赞一个  0 真差劲  0 去评论

<!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><a href="#" title="我的生活照片" accesskey="g">[G]ALLERY 我的相册</a></li>
          <li><a href="#" 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>

		<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


  </body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

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

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行