JavaScript implementiert ein beeindruckendes Slide-up-Menü example

JavaScript implementiert ein beeindruckendes Slide-up-Menü example_JavaScript

WBOY

Freigeben： 2016-05-16 15:47:41

Original

1237 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JavaScript ein beeindruckendes, nach oben verschiebbares Menü implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.