Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde

Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:46:39

Original

1075 Leute haben es durchsucht

Dieser Artikel beschreibt das Beispiel von JavaScript, das den Effekt der Änderung des entsprechenden Inhalts unten realisiert, wenn die Maus platziert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein relativ häufiger Menüeffekt im Internet. Wenn die Maus platziert wird, wechselt der entsprechende Inhalt mit Grafik- und Textlayout. Aus technischer Sicht werden JS und CSS kombiniert, um dies zu erreichen. Sie können den JS-Teil des Codes separat extrahieren und als JS-Datei speichern und ihn dann in die Seite einfügen, wodurch der Hauptseitencode einfacher wird. Dieser Effekt wird normalerweise unter IE, Firefox und anderen Browsern getestet.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>鼠标放上后下面的内容切换</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menuA{background:#333;float:left;padding-top:2px;width:100%;}
.menuA li{float:left;}
.menuA li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menuA .check a {background:#fff;color:#000;}
.menuB{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.menuB ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<div class="menuA">
<ul>
   <li class="check"><a href="#">国际时事</a></li>
   <li><a href="#">精美壁纸</a></li>
   <li><a href="#">大国关系</a></li>
   <li><a href="#">欧美风情</a></li>
</ul>
</div>
<div class="menuB">
 <ul style="display:block;" class="one">
 <li><a href="#">国际时事</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">精美壁纸</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">大国关系</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">欧美风情</a></li>
 </ul>
</div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
 if(elements[s].className==name){
  return elements[s];
 }
 }
}
var tabList = $_class("menuA").getElementsByTagName("li")
 tabCon = $_class("menuB").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
 var t = i;
 tabList[t].onmouseover = function(){
  for(o=0;o<tabCon.length;o++){
  tabCon[o].style.display = "none";
  tabList[o].className = "";
  if(t==o){
   this.className = "check";
   tabCon[o].style.display = "block";
  }
  }
 }
 })()
}
</script>
</body>
</html>

Nach dem Login kopieren

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