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>