javascript实现超炫的向上滑行菜单实例
本文实例讲述了javascript实现超炫的向上滑行菜单。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>JS实现文字上下滑动导航</title>
<styletype="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;}
#navul{width:240px;height:40px;margin:0auto;}
#navli{height:40px;width:240px;}
#nava{float:left;width:240px;position:relative;height:40px;overflow:hidden;font-size:14px;color:#e0e03a;text-decoration:none;cursor:pointer;}
#navstrong{float:left;width:240px;}
#navspan{float:left;width:200px;padding:020px;height:40px;line-height:40px;background:#900;clear:both;white-space:nowrap;}
#nav.active,#nav.currentspan{background:#600;color:#fff;}
#nav.current.active{color:#e0e03a;}
</style>
<script>
window.onload=function()
{
varoDiv=document.getElementById('nav');
varaStrong=oDiv.getElementsByTagName('strong');
varaA=oDiv.getElementsByTagName('a');
variTarget=oDiv.getElementsByTagName('li')[0].offsetHeight;
for(vari=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);
};
}
};
functionstartMove(obj,target)
{
clearInterval(obj.iTime);
obj.iTime=setInterval(function(){
if(obj.offsetTop==target)
{
clearInterval(obj.iTime);
}
else
{
variSpeed=(target-obj.offsetTop)/4;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
obj.style.top=obj.offsetTop+iSpeed+'px';
}
},30);
}
</script>
</head>
<body>
<divid="nav">
<ul>
<liclass="current">
<ahref="#">
<strong>
<span>首页</span>
<spanclass="active">首页</span>
</strong>
</a>
</li>
<li>
<ahref="#">
<strong>
<span>前端开发课程</span>
<spanclass="active">前端开发课程</span>
</strong>
</a>
</li>
<li>
<ahref="#">
<strong>
<span>妙味视频教程</span>
<spanclass="active">妙味视频教程</span>
</strong>
</a>
</li>
<li>
<ahref="#">
<strong>
<span>周末班上课安排</span>
<spanclass="active">周末班上课安排</span>
</strong>
</a>
</li>
<li>
<ahref="#">
<strong>
<span>结课标准</span>
<spanclass="active">结课标准</span>
</strong>
</a>
</li>
<li>
<ahref="#">
<strong>
<span>联系妙味</span>
<spanclass="active">联系妙味</span>
</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。