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

2024-05-06 16:24:15

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了javascript实现超炫的向上滑行菜单实现方法,以一个完整实例形式分析了javascript针对页面元素的遍历与样式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

<!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>JS实现文字上下滑动导航</title>

<style type="text/css">

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>

<script>

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>

<div id="nav">

<ul>

<li class="current">

<a href="#">



首页

首页



</a>

</li>

<li>

<a href="#">



前端开发课程

前端开发课程



</a>

</li>

<li>

<a href="#">



妙味视频教程

妙味视频教程



</a>

</li>

<li>

<a href="#">



周末班上课安排

周末班上课安排



</a>

</li>

<li>

<a href="#">



结课标准

结课标准



</a>

</li>

<li>

<a href="#">



联系妙味

联系妙味



</a>

</li>

</ul>

</div>

</body>

</html>