js, um einen einfachen Akkordeoneffekt zu erzielen

In diesem Artikel wird der spezifische Code von js zur Erzielung des Akkordeoneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung:

Implementierungscode:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="UTF-8">
  <Titel></Titel>
  <Stil>
   *{
    Rand: 0;
    Polsterung: 0;
   }
   ul,li{
    Listenstil: keiner;
   }
   .Kasten{
    Breite: 1200px;
    Höhe: 260px;
    Rand: 50px automatisch 0;
    Überlauf: versteckt;
   }
   .Liste{
    Breite: 2000px;
    Höhe: 260px;
   }
   .list>li{
    Breite: 200px;
    Höhe: 260px;
    schweben: links;
    Hintergrundbild:URL(Bilder/1.jpg);
    Hintergrundposition: Mitte Mitte;
    Hintergrundwiederholung: keine Wiederholung;
   }
   .list>li:ntes-Kind(2){
    Hintergrundbild:URL(Bilder/2.jpg);
   }
   .list>li:ntes-Kind(3){
    Hintergrundbild:URL(Bilder/3.jpg);
   }
   .list>li:ntes-Kind(4){
    Hintergrundbild:URL(Bilder/4.jpg);
   }
   .list>li:ntes-Kind(5){
    Hintergrundbild:URL(Bilder/5.jpg);
   }
   .list>li:ntes-Kind(6){
    Hintergrundbild:URL(Bilder/6.jpg);
   }
  </Stil>
 </Kopf>
 <Text>
  
  <div Klasse="Box">
   <ul Klasse="Liste">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <Skript>
   
   var oLis = document.getElementsByClassName("Liste")[0].Kinder;
   
   für(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     für(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       Breite:160
      },50)
     }
     starteBewegung(diese,{
      Breite: 400
     },50)
    }
    oLis[i].onmouseout = Funktion(){
     
     für(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       Breite: 200
      },10)
     }
    }
   }
   
   
  </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
Verwenden Sie ReactJS, um Registerkartenwechsel, Menüleistenwechsel, Akkordeonwechsel und Fortschrittsbalkeneffekte zu implementieren
js, um einen einfachen Akkordeoneffekt zu erzielen
Navigationsmenü mit Akkordeoneffekt, erstellt mit nativem JS
Entwicklungsbeispiel für eine Akkordeonmenükomponente in Vue.js
js realisiert den Effekt eines faltbaren und erweiterbaren Akkordeonmenüs
Reines js, um einen Akkordeoneffekt zu erzielen
JS realisiert den Bildakkordeoneffekt
Natives JS zum Erzielen eines vertikalen Akkordeoneffekts
Html5 js zum Erzielen eines Akkordeoneffekts

<<: Analyse des Prozesses zum Bereitstellen reiner HTML-Dateien in Tomcat und WebLogic

>>: Probleme und Lösungen bei der Installation und Verwendung von VMware