jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)

In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des Jalousieeffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wahrscheinlich die Idee:

Ein div (800px breit) enthält ul und li. Die Breite und Höhe von li sind auf 560px bzw. 300px eingestellt (das Bild in li hat auch diese Breite und Höhe). Legen Sie die absolute Positionierung für li und die relative Positionierung für div fest.
.no0{ links:0; }
.no1{ links:160px; }
.no2{ links:320px; }
.no3{ links:480px; }
.no4{ links: 640px; }
Wenn es nicht animiert ist, ist jedes Li 160 Pixel breit und hoch. (800/5=160 Div Breite/Anzahl der Bilder)
Während der Animation betragen die Breite und Höhe des mit der Maus eingegebenen Linien 560 Pixel bzw. 300 Pixel, wodurch das Bild vollständig angezeigt wird. Die Breite anderer Bilder, die nicht mit der Maus eingegeben wurden, beträgt (800-560)/4=160px
Wenn die Maus aus dem Feld heraus bewegt wird, kehrt jedes Bild an seine ursprüngliche Position zurück.

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
        Überlauf: versteckt;
    }
    .Kasten{
        Breite: 800px;
        Höhe: 300px;
        Rand: 5px, durchgehend grau;
        Rand: 100px automatisch;
        Position: relativ;
    }
    li{
        Listenstil: keiner;
        schweben: links;
        Position: absolut;
        /*Breite:160px;*/
        Höhe: 300px;
        Breite: 560px;
    }
    .no0{ links:0; }
    .no1{ links:160px; }
    .no2{ links:320px; }
    .no3{ links:480px; }
    .no4{ links: 640px; }

    img{
        Breite: 560px;
        Höhe: 300px;
    }

</Stil>
<Text>
<div Klasse="Box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<Skript>
    
// Ausgangsposition 0 160 320 480 640
// Die Position ganz links 0 60 120 180 240
//Ganz rechte Position: 0 560 620 680 740
$lis = $("li");
//Wenn die Maus Abbildung 1 betritt, werden die Abbildungen 1 bis 4 nach rechts animiert $lis.eq(0).mouseenter(function(){
      $lis.stop(true);
      $lis.eq(1).animate({left:560},1000);
      $lis.eq(2).animate({left:620},1000);
      $lis.eq(3).animate({left:680},1000);
     $lis.eq(4).animate({left:740},1000);
  });
//Wenn die Maus Bild 2 betritt, wird Bild 2 nach links animiert und die Bilder 3 bis 4 nach rechts$lis.eq(1).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:620},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(2).mouseenter(Funktion(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(3).mouseenter(Funktion(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(4).mouseenter(Funktion(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:240},1000);

});


//Wenn die Maus die Box verlässt, kehrt jedes Bild an seine ursprüngliche Position zurück$(".box").mouseleave(function(){
        $lis.stop(true);
        $lis.eq(1).animate({left:160},1000);
        $lis.eq(2).animate({left:320},1000);
        $lis.eq(3).animate({left:480},1000);
        $lis.eq(4).animate({left:640},1000);
    })

</Skript>
</body>
</html>

Laufergebnisse:

Code-Vereinfachung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
        Überlauf: versteckt;
    }
    .Kasten{
        Breite: 800px;
        Höhe: 300px;
        Rand: 5px, durchgehend grau;
        Rand: 100px automatisch;
        Position: relativ;
    }
    li{
        Listenstil: keiner;
        schweben: links;
        Position: absolut;
        Breite: 560px;
        Höhe: 300px;
    }
    .no0{ links:0; }
    .no1{ links:160px; }
    .no2{ links:320px; }
    .no3{ links:480px; }
    .no4{ links: 640px; }

    img{
        Breite: 560px;
        Höhe: 300px;
    }

</Stil>
<Text>
<div Klasse="Box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<Skript>
// Ausgangsposition 0 160 320 480 640
// Die Position ganz links 0 60 120 180 240
//Ganz rechte Position: 0 560 620 680 740


    $lis = $("li");
    $lis.mouseenter(Funktion(){
        $lis.stop(true);
        konsole.log( $(this).index());
        var index = $(dieser).index();
// Wenn die Maus die linke Seite des Bildes betritt, Animation nach links. Rechts, nach rechts animieren $lis.each(function(i){
            wenn(i <= Index){
                $(diese).animate({left:60*i},1000);
            }anders{
                $(diese).animate({links:560+60*(i-1)},1000);
            }
        })
    })

//Wenn die Maus die Box verlässt, kehrt jedes Bild an seine ursprüngliche Position zurück$(".box").mouseleave(function(){
    $lis.stop(true);
      $lis.each( Funktion(i){
          $(diese).animate({left:160*i},1000);
      });

});



</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:

jQuery, um den Effekt von Jalousien zu erzielen
jQuery realisiert die gemeinsame Nutzung des Codes für den Shutter-Fokus-Bildanimationseffekt (mit Quellcode-Download)
So erzielen Sie mit jQuery einen Seitenverschluss-Anzeigeeffekt mit rotierender Laterne und Scrollen
jQuery Flip Card- oder Shutter-Effekt (Inhalt wechselt automatisch in drei Sekunden)

<<: XHTML-Einführungstutorial: Webseitenkopf und DTD

>>: Eine kurze Erläuterung der Rolle des Parameters docker --privileged=true

Verschiedene Methoden zum Ändern des CSS-Stils, um graue Webseiten zu erhalten (keine Farbe, nur helles Schwarzweiß)

Artikel

Detailliertes grafisches Tutorial zur Installation, Inbetriebnahme und Grundkonfiguration von MySQL unter der Windows-Version

Artikel

Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text

In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)

Artikel

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)

Wahrscheinlich die Idee:

Code:

Verschiedene Methoden zum Ändern des CSS-Stils, um graue Webseiten zu erhalten (keine Farbe, nur helles Schwarzweiß)

Detailliertes grafisches Tutorial zur Installation, Inbetriebnahme und Grundkonfiguration von MySQL unter der Windows-Version

Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text

So erstellen Sie einen SSH-Dienst basierend auf einem Golang-Image in Docker

So sammeln Sie Nginx-Protokolle mit Filebeat

CentOS verwendet lokale Yum-Quellen zum Erstellen einer LAMP-Umgebung – Grafik-Tutorial

In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

uniapp implementiert Datums- und Zeitauswahl

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Artikel empfehlen

So zeigen Sie Bilder im TIF-Format im Browser an

Lösung für die Inkonsistenz zwischen Crontab-Ausführungszeit und Systemzeit

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?

Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen

Vue implementiert eine teilweise Aktualisierung der Seite (Router-View-Seitenaktualisierung)

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)

Erstellen Sie eine virtuelle Servermaschine in VMware Workstation Pro (grafisches Tutorial)

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Installieren Sie mysql5.7.17 mit RPM unter Linux

Schritte zur Installation von cuda10.1 unter Ubuntu 20.04 (grafisches Tutorial)

Perfekte Lösung für das Problem, unter Windows 10 nicht auf den Port des Docker-Containers zugreifen zu können