So verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren-js-Tutorial-php.cn

So verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren

黄舟

Freigeben： 2017-07-25 09:22:18

Original

2173 Leute haben es durchsucht

Verwenden Sie js, um eine einfache Navigationsleiste zu implementieren. Schritte zur Verwendung von js, um einen bestimmten Effekt zu erzielen: 1. CSS-Layout implementieren; 2: JS-Implementierungsprinzip; 3. CSS-Code schreiben;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
     ul {           
padding:0px;           
margin:0px;           
list-style:none;     
}

     a {           
text-decoration:none;           
background-color:#f1f1f1;           
display:block;           
width:50px;           
text-align:center;     
}

     .list {           
display:none;     
}


     ul ul{          
width:140px;          
border:solid #000 1px;  
          position:absolute;     
}

     ul ul li {         
text-align:center;     
}

     .item {       
 position:relative;    
  }
  </style>
  </head>
  <body>
     <ul>
         <li class="item" id="item">
             <a href="#" id="link">微博</a>
             <ul class="list" id="list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
             </ul>

         </li> 
     </ul></body><script>
      var link = document.getElementById("link");      
  var item = document.getElementById("item");      
  var list = document.getElementById("list");
      item.onmouseover = show;
      item.onmouseout = hide;      function show(){
             list.style.display = "block";   
             link.style.background = "yellow";
      }      function hide(){
          list.style.display = "none";
      }</script></html>

Nach dem Login kopieren

JS-Methode zum Entfernen eines Elements aus der Ansicht:
(1)display:none;(belegt den Dokumentfluss nicht)
(2)visibility:hidden;(ein Element ausblenden Elemente, die immer noch den Dokumentfluss belegen)
(3) Setzen Sie die Transparenz auf 0, d. h. opacity:0; (Im IE-Browser kann die Transparenz wie folgt eingestellt werden: alpha(opacity=0);)
(4) Legen Sie den Randwert fest, setzen Sie den Randwert beispielsweise auf einen negativen Wert
(5) Ändern Sie durch overflow:hidden; und relative Positionierung die linken und oberen Werte, um die Position zu verschieben des Elements
(6) Durch ein weißes p wird dieses darüber liegende p entfernt.
……
Ereignisse in js: Mausereignisse, Tastaturereignisse, Systemereignisse, Formularereignisse, benutzerdefinierte Ereignisse usw. Zu den üblichen Mausereignissen gehören: onmouseover, onmouseout, onmousemove, onclick, onmounseup, Mousedown usw. Funktionsaufrufmethoden: Ereignisaufruf, anonymer Aufruf, direkter Aufruf.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!