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

Analyse des Konfigurationsprozesses zur Installation von MariaDB basierend auf Docker

Detaillierte Erläuterung, wie Sie Programme auf dem Alibaba Cloud Server bereitstellen und über Domänennamen direkt darauf zugreifen können

Artikel

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

Wahrscheinlich die Idee:

Code:

Analyse des Konfigurationsprozesses zur Installation von MariaDB basierend auf Docker

Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

Detaillierte Erklärung des Befehls zum Anzeigen von Protokolldateien in der Linux-Umgebung

VMware- und CentOS-Systeminstallationsmethode zum Zurücksetzen des Root-Passworts

Ausführliche Erläuterung des MySQL-Gemeinschaftsindex und des eindeutigen Index

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Implementierung des WeChat-Tap-Animationseffekts basierend auf dem CSS3-Animationsattribut

Detaillierte Erläuterung, wie Sie Programme auf dem Alibaba Cloud Server bereitstellen und über Domänennamen direkt darauf zugreifen können

Artikel empfehlen

Verstehen Sie die Implementierung des Nginx-Standortabgleichs in einem Artikel

MySQL-Datenoperation – Verwendung von DML-Anweisungen

Implementierung des Pushens von Docker-Images zum Docker Hub

Tutorial zur Installation von Pycharm und Ipython unter Ubuntu 16.04/18.04

HTML-Code Textfeld Eingabe begrenzen Textfeld wird grau Textfeldeingabe begrenzen

Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux

So verwenden Sie den Linux-Befehl „basename“

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Eine kurze Diskussion über den Unterschied zwischen src und href in HTML

Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

Detaillierte Erklärung der Stammverzeichniseinstellungen in nginx.conf

SQL-Implementierung von LeetCode (178. Punkterangliste)

Probleme und Lösungen beim Ersetzen von Oracle durch MySQL

Einfache Prinzipien für die Gestaltung des Webseiten-Layouts