suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert ein beeindruckendes Slide-up-Menü example_JavaScript

JavaScript implementiert ein beeindruckendes Slide-up-Menü example_JavaScript

WBOY
WBOYOriginal
2016-05-16 15:47:411246Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einfache Implementierung der asynchronen Programmierung verspricht Modus_GrundkenntnisseNächster Artikel：Einfache Implementierung der asynchronen Programmierung verspricht Modus_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen