js实现鼠标感应导航菜单切换显示特效，当用户的鼠标经过导航标题立即切换显示，自动弹出该菜单列表下拉菜单内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js鼠标感应平滑切换导航菜单_武鸣人</title>
<style type="text/css">
body {cursor:crosshair; background:#111; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}
.link_wwwwumingren {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;}
.title {position:relative;cursor:pointer;background:#333;width:100%;color:#fff;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.title_wuming_ren {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.text {position:relative;text-align:justify;margin:10px;font-family:verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}
</style>
<script type="text/javascript"><!--
var object = new Array();
function Slide(N,oCont){
this.N = N;
this.S = 1.1;
this.object = new Array();
this.CObj = function (parent,N){
this.parent = parent;
this.N = N;
this.obj = parent.frm[N];
this.tit = this.obj.firstChild;
this.div = this.obj.getElementsByTagName("div")[1];
this.div.style.visibility = "hidden";
this.y0 = N * 18;
this.Y1 = this.y0;
this.obj.style.top = this.y0;
this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;
this.obj.style.visibility = "visible";
this.obj.parent = this;
this.run = false;
this.move = function(){
with(this){
dy = (y1-y0)/parent.S;
if(Math.abs(dy)>.1){
y0+=dy;
obj.style.top = Math.round(y0);
setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
} else {
run = false;
if(dy>0)div.style.visibility="hidden";
else if(N>0)parent.object[N-1].div.style.visibility="hidden";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
}
this.obj.onmouseover = function(){
with(this.parent){
if(!run){
run = true;
div.style.visibility="visible";
for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
tit.className = "title_wuming_ren";
for(i=0;i<=N;i++){
parent.object[i].y1 = i*18;
parent.object[i].move();
}
for(i=N+1;i<parent.NF;i++){
parent.object[i].y1 = parent.H-(parent.NF-i)*18;
parent.object[i].move();
}
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
this.frm = document.getElementById(oCont);
this.H = parseInt(this.frm.style.height);
this.frm = this.frm.getElementsByTagName("span");
this.NF = this.frm.length;
for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
this.object[0].obj.onmouseover();
this.S = 10;
}
onload = function() {
object[0] = new Slide(0, "frames");
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="position: absolute; left: 200px; top: 50%;">
<div id="frames" style="overflow: hidden; position: absolute; width: 200px; height: 340px; left: -100px; top: -170px;">
<span style="top: 0pt; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title_wuming_ren">武鸣人一号</div>
<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 26px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: visible;">
各种信息免费发布，资源共享合作共赢！
</div>
</span>
<span style="top: 213px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人二号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 231px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人三号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 249px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人四号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 267px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人五号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 285px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人六号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 303px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人七号</div>
<div style="visibility: hidden;" class="text">各种信息免费发布，资源共享合作共赢！</div>
</span>
<span style="top: 321px; height: 211px; visibility: visible;" class="link_wwwwumingren"><div class="title">武鸣人八号</div>
<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size:26px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: hidden;">
各种信息免费发布，资源共享合作共赢！
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处