Natives JS zum Erzielen von Book-Flipping-Effekten

In diesem Artikel wird ein mit nativem JS implementiertes Diagramm zum Book-Flipping-Effekt vorgestellt. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren und einfügen.

<!doctype html>
<html>
 
    <Kopf>
        <meta charset="utf-8">
        <title>Natives JS zum Erzielen von Buchumblättereffekten</title>
        <style type="text/css">
            * {
                Rand: 0;
                Polsterung: 0;
                Listenstil: keiner;
            }
 
            #btn {
                Breite: 50px;
                Höhe: 40px;
                Zeilenhöhe: 40px;
                Position: relativ;
                links: 50%;
                Rand links: -25px;
                oben: 100px;
            }
 
            #Buch {
                Breite: 600px;
                Höhe: 400px;
                Position: absolut;
                links: 50%;
                oben: 50 %;
                Rand: -200px 0 0 -300px;
                Rand: 1px tief schwarz;
                /* Erstes Cover */
                Hintergrund: URL (Bilder/0.jpg);
            }
 
            #rechteSeite {
                Breite: 50%;
                Höhe: 100%;
                Position: absolut;
                links: 50%;
                Z-Index: 2;
                Übergang: 0,5 s;
                transformieren: Perspektive (800px) drehenY (0px);
                Transform-Origin: links Mitte;
                Hintergrund: schwarz;
                Transformationsstil: 3D bewahren;
            }
 
            #rechteSeite #obersterKnoten {
                Position: absolut;
                Breite: 100 %;
                Höhe: 100%;
                /* Erstes Cover */
                Hintergrund: URL (Bilder/0.jpg) 300px 0;
                transformieren: übersetzenZ(1px);
            }
 
            #rechteSeite #untersterKnoten {
                Position: absolut;
                Breite: 100 %;
                Höhe: 100%;
                /* Drittes Cover */
                Hintergrund: URL (Bilder/2.jpg) 0 0;
                /*scaleX stellt das Bild nach dem Umdrehen des Buchspiegels wieder her*/
                transformieren: verschiebeZ(-1px) skaliereX(-1);
            }
 
            #rechteAndereSeite {
                Position: absolut;
                links: 50%;
                Höhe: 100%;
                Breite: 50%;
                /* Drittes Cover */
                Hintergrund: URL (Bilder/2.jpg) 300px 0;
                Z-Index: 1;
            }
        </Stil>
    </Kopf>
 
    <Text>
        <Eingabetyp='Schaltfläche' Wert='Nächste Seite' ID='btn'>
        <div id='Buch'>
            <div id='rechteSeite'>
                <div id='oberster Knoten'></div>
                <div id='untersterKnoten'></div>
            </div>
            <div id='rechteAndereSeite'></div>
        </div>
        <Skripttyp="text/javascript">
            Var-Index = 0;
            var flag = falsch;
 
            btn.onclick = Funktion () {
                wenn (Flagge) zurückgeben;
                Flagge = wahr;
                Index++;
                rechteSeite.Stil.Übergang = '0,5 s';
                rightPage.style.transform = 'Perspektive (800px) Y-Drehung (-180 Grad)';
 
                setzeTimeout(Funktion () {
                    // Den Hintergrund der nächsten Seite sofort nach dem Umblättern ändern book.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
                    // Seite sofort zurückblättern lassenrightPage.style.transition = '0s';
                    rightPage.style.transform = 'Perspektive(800px) Y-Drehung(0 Grad)';
 
                    // Den vorderen Hintergrund des Flip-Papers ändern topNode.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
                    // Ändern Sie den Hintergrund der Rückseite des Flip-Papiers bottomNode.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
 
                    // Nach dem Umblättern den Papierhintergrund ändern. rightOtherPage.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
                    Flagge = falsch;
 
                }, 500);
 
            };
        </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: