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:
|
<<: So erstellen Sie ein Apache-Image mit Dockerfile
>>: Anfänger lernen einige HTML-Tags (1)
Inhaltsverzeichnis Vorwort Begründung Verfahren 1...
Laden Sie die offizielle Website herunter Gehen S...
Vorwort Beim Anlegen der Primär- und Fremdschlüss...
Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...
echarts Wortwolke ist eine Erweiterung von echart...
Inhaltsverzeichnis Anwendungsszenarien Lösung 1. ...
Inhaltsverzeichnis Einführung in FRM-Dateien und ...
Vorwort In letzter Zeit haben viele neue Kollegen...
Ich habe mehr als eine Stunde gebraucht, um SSH i...
Aktualisierung der Ereignisantwort: Aktualisierun...
Inhaltsverzeichnis 1. Reagieren Grundlegende Verw...
Fall 1: Letzte Übermittlung und kein Push Führen ...
Inhaltsverzeichnis Warum einen Debugger verwenden...
Inhaltsverzeichnis Karte Filter manche jeder Inde...
Ich habe kürzlich den Quellcode von Vue studiert ...