JavaScript zum Erzielen eines Akkordeoneffekts

In diesem Artikel wird der spezifische Code für JavaScript zum Erzielen des Akkordeoneffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">


<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <Stil>
  * {
   Rand: 0;
   Polsterung: 0;
  }
  
  ul {
   Breite: 100 %;
   Textausrichtung: zentriert;
  }
  
  ul li {
   Listenstil: keiner;
   Überlauf: versteckt;
   Anzeige: Inline-Block;
   Übergang: alles 1en;
  }
 </Stil>
</Kopf>

<Text>
 <ul>

 </ul>
 <Skript>
  var ul = document.querySelector("ul");
  var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];
  für (var i = 0; i < imgs.length; i++) {
   var li = document.createElement("li");
   var img = document.createElement("img");
   img.src = Bilder[i];
   li.appendChild(img);
   ul.appendChild(li);
  }
  var lis = document.querySelectorAll("li");
  Fenster.beimLaden = Fenster.beiGrößenänderung = Funktion() {
   für (var i = 0; i < lis.length; i++) {
    lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
   }
  }
  var imgM = document.querySelectorAll("img");
  für (sei i = 0; i < imgM.length; i++) {
   imgM[i].onmouseenter = Funktion() {
    für (var j = 0; j < imgM.length; j++) {
     lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
    }
    lis[i].style.width = imgM[i].offsetWidth + "px";
   }

   imgM[i].onmouseleave = Funktion() {
    für (var i = 0; i < lis.length; i++) {
     lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
    }
   }
  }
 </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Reines JS zum Erzielen des Akkordeoneffektcodes
Navigationsmenü mit Akkordeoneffekt, erstellt mit nativem JS
Verwenden Sie ReactJS, um Registerkartenwechsel, Menüleistenwechsel, Akkordeonwechsel und Fortschrittsbalkeneffekte zu implementieren
Entwicklungsbeispiel für eine Akkordeonmenükomponente in Vue.js
js, um einen einfachen Akkordeoneffekt zu erzielen
js realisiert den Effekt eines faltbaren und erweiterbaren Akkordeonmenüs
Reines js, um einen Akkordeoneffekt zu erzielen
Natives JS zum Erzielen eines vertikalen Akkordeoneffekts
Cooler js Akkordeoneffekt
JS realisiert den Bildakkordeoneffekt

<<: Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

>>: So installieren Sie MySQL 5.7.17 und stellen die Kodierung in Windows auf UTF-8 ein