search

Home >Web Front-end >JS Tutorial >javascript实现超炫的向上滑行菜单实例_JavaScript

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

WBOY
WBOYOriginal
2016-05-16 15:47:411248browse

本文实例讲述了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&#63;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="#">
    <strong>
     <span>首页</span>
     <span class="active">首页</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>前端开发课程</span>
     <span class="active">前端开发课程</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>妙味视频教程</span>
     <span class="active">妙味视频教程</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>周末班上课安排</span>
     <span class="active">周末班上课安排</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>结课标准</span>
     <span class="active">结课标准</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>联系妙味</span>
     <span class="active">联系妙味</span>
    </strong>
   </a>
  </li>
 </ul>
</div>
</body>
</html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：简单实现异步编程promise模式_基础知识Next article：JavaScript数据类型判定的总结笔记_基础知识

Related articles

See more