javascript实现超炫的向上滑行菜单实例

更新时间：2026-03-11 18:53:02作者：fang

本文实例讲述了javascript实现超炫的向上滑行菜单。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS实现文字上下滑动导航</title>

body { margin:0; background:#66FF99; }

ul { padding-left:0; margin:0; }

li { list-style:none; }

#nav { height:40px; background:#900; margin-top:50px; }

#nav ul { width:240px; height:40px; margin:0 auto; }

#nav li {height:40px; width:240px;}

#nav a { float:left; width:240px;position:relative; height:40px; overflow:hidden; font-size:14px; color:#e0e03a; text-decoration:none; cursor:pointer; }

#nav strong { float:left;width:240px; }

#nav span { float:left;width:200px; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; white-space:nowrap;}

#nav .active,#nav .current span { background:#600; color:#fff; }

#nav .current .active { color:#e0e03a; }

</style>

window.onload=function()

{

var oDiv=document.getElementById('nav');

var aStrong=oDiv.getElementsByTagName('strong');

var aA=oDiv.getElementsByTagName('a');

var iTarget=oDiv.getElementsByTagName('li')[0].offsetHeight;

for(var i=0; i<aStrong.length; i++)

{

aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px';

aStrong[i].style.position='absolute';

aStrong[i].style.top=aStrong[i].style.left=0;

aStrong[i].onmouseover=function()

{

startMove(this, -iTarget);

};

aStrong[i].onmouseout=function()

{

startMove(this, 0);

};

}

};

function startMove(obj,target)

{

clearInterval(obj.iTime);

obj.iTime=setInterval(function(){

if(obj.offsetTop==target)

{

clearInterval(obj.iTime);

}

else

{

var iSpeed=(target-obj.offsetTop)/4;

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

obj.style.top=obj.offsetTop+iSpeed+'px';

}

}, 30);

}

</script>

</head>

<body>

<ul>

首页

首页

</a>

</li>

<li>

前端开发课程

前端开发课程

</a>

</li>

<li>

妙味视频教程

妙味视频教程

</a>

</li>

<li>

周末班上课安排

周末班上课安排

</a>

</li>

<li>

结课标准

结课标准

</a>

</li>

<li>

联系妙味

联系妙味

</a>

</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。