Kommentar: Wenn es um Slider in der Vergangenheit geht, wurde CSS+JS verwendet, um verwandte Schalteffekte zu erzielen. Ich habe gehört, dass jeder die Implementierungsmethode zur Verwendung von HTML5+CSS3 diskutiert hat, aber ich habe sie nie selbst implementiert. Ok, ich habe diesmal Zeit, CSS3 zu spielen. Interessierte Freunde können mehr lernen
Nun, das letzte Mal, als ich sagte, ich würde schnell ein paar Artikel hinzufügen, aber ich habe den Termin ruhig gebrochen. Es wurde erst in einem weiteren Monat veröffentlicht, was wirklich deprimierend ist. Ich stellte fest, dass ich in letzter Zeit immer keine Zeit gefunden habe und im Grunde ein Projekt nach dem anderen arrangiert habe. Ich konnte entweder nicht das richtige Thema finden, als ich frei war, oder ich konnte keine Zeit finden, als ich verwirrt war. Deshalb habe ich mich entschlossen, die Wissenspunkte der Probleme zusammenzufassen, mit denen ich seit einiger Zeit zu kämpfen habe, und sie nacheinander zu studieren, wenn ich frei bin, und sie dann in Artikel organisieren und sie teilen.Wenn Sie Slider aus dem Thema erwähnen, haben Sie immer CSS+JS verwendet, um verwandte Schalteffekte zu erzielen. Ich habe gehört, dass jeder die Implementierungsmethode zur Verwendung von HTML5+CSS3 diskutiert hat, aber ich habe sie nie selbst implementiert. Ok, ich habe diesmal Zeit, CSS3 zu spielen. Tatsächlich wurde ich auch von einer Nachricht über Weibo angezogen. Als ich sah, dass die Ergebnisse anderer sehr gut waren, hatte ich den Drang, es zu tun.
1. Fortpflanzungsdiagramm
Es sieht nicht wesentlich von dem mit JS in der Vergangenheit erzielten Effekt aus, aber das allgemeine Gefühl ist sehr elegant. Nun, die Kraft von CSS3 ist, dass ich nur sehr wenig Code geschrieben habe, um komplexere Ergebnisse zu erzielen. Dieses Beispiel hat jedoch auch etwas nicht perfektes. Wenn Sie zwischen zwei Bildern wechseln, werden Sie es während der Ausführung der CSS3 -Animation, die weniger leistungsfähig ist, immer noch sehen, wenn es Bilder in der Mitte gibt. Aber denken Sie darüber nach, dies ist der Effekt, der durch reine CSS3 erzielt wird. Die komplexen HTML -Strukturänderungen, die mit JS implementiert sind, kann hier nicht ersichtlich sein, sodass der obige Effekt nur schwer mit CSS3 implementiert ist.
2. HTML -Struktur
<div>
<Eingabe checked type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<div>
<div>
<div>
<artikels>
<div>
<h1> title1 </h1>
<a href = "#"> Beschreibung1 </a>
</div>
<img src = "img/pic1.png"/>
</article>
<artikels>
<div>
<h1> title2 </h1>
<a href = "#"> Beschreibung2 </a>
</div>
<img src = "img/pic2.png"/>
</article>
<artikels>
<div>
<h1> title3 </h1>
<a href = "#"> Beschreibung3 </a>
</div>
<img src = "img/pic3.png"/>
</article>
<artikels>
<div>
<h1> title4 </h1>
<a href = "#"> Beschreibung4 </a>
</div>
<img src = "img/pic4.png"/>
</article>
<artikels>
<div>
<h1> Titel5 </h1>
<a href = "#"> Beschreibung5 </a>
</div>
<img src = "img/pic5.png"/>
</article>
</div>
</div>
</div>
<div>
<Label für = "Slider1"> </label>
<Label für = "Slider2"> </label>
<Label für = "Slider3"> </label>
<Label für = "Slider4"> </label>
<Label für = "Slider5"> </label>
</div>
<div>
<Label für = "Slider1"> </label>
<Label für = "Slider2"> </label>
<Label für = "Slider3"> </label>
<Label für = "Slider4"> </label>
<Label für = "Slider5"> </label>
</div>
</div>
Der obige Code ist die Haupt -HTML -Struktur, die eine Eingangsfunkgruppe enthält, die Sie hier als Hub sehen können, und spielt in diesem Beispiel eine sehr wichtige Rolle (deshalb möchte ich ihn im Beispiel nicht verbergen, der wahre Held sollte nicht der Held hinter den Kulissen sein).
Die folgenden Schieberegler enthalten Bilder, die angezeigt werden müssen. Hier scheint es die Wirkung einer Schiebetür zu sein, die verschiedene Bilder zeigt, indem die inneren Randlinks gesteuert werden.
Steuerelemente sind der Schaltpfeil auf der linken und rechten Seite des Bildes. Machen Sie sich keine Sorgen, warum müssen Sie 5 entwerfen? Es scheint nur, dass zwei genug sind. Bitte erinnern Sie uns daran, dass wir in diesem Beispiel JS niemals verwenden werden, um das Schalten zu erreichen.
Die letzte Aktivität ist die Schaltfläche Klick unter dem Bild. Sie können direkt das Bild auswählen, das Sie durch Klicken auf das Bild auswählen möchten. Sie können die Struktur auch innen bereichern, um einen Miniaturansichteneffekt zu entwerfen.
3. CSS Style Sheet
@charset UTF-8;
/* gemeinsam */
Körper {Hintergrund: #ddd; Überlauf-x: versteckt;}
#bd {width: 960px; Margin: 100px Auto; Max-Width: 960px;}
/ * Modul: Schieberegler */
#sliders {
Border-Radius: 5px;
Box-Shadow: 1PX 1PX 4PX #666;
Polsterung: 1%;
Hintergrund: #ffff;
}
#Überlauf{
Breite: 100%;
Überlauf: versteckt;
}
#Sliders .inner {
Breite: 500%;
Transiton: alle 1s linear;
-Webkit-Übergang: Alle 1S linear;
}
#Sliders Artikel {
float: links;
Breite: 20%;
}
#Sliders Artikel .Info {
Position: absolut;
Deckkraft: 0;
Polsterung: 30px;
Farbe: #666;
Schriftfamilie: Arial;
Übergang: Deckkraft von 0,1S-Entlastung;
-Webkit-transform: translatez (0);
-Webkit-Übergang: Deckkraft 0,1S-Leichtigkeit;
}
#Sliders Artikel .Info H1 {
Schriftgröße: 22px;
Schriftgewicht: fett;
Rand: 0 0 5px;
}
#Sliders Artikel .Info a {
Farbe: #666;
Textdekoration: Keine;
}
/ * Modul: Steuerelemente */
#Controls {
Höhe: 50px;
Breite: 100%;
Rand: -25%;
}
#Controls Label {
Anzeige: Keine;
Breite: 50px;
Höhe: 50px;
Deckkraft: 0,3;
Cursor: Zeiger;
}
#Controls Label: Hover {
Deckkraft: 1;
}
/ * Modul: aktiv */
#aktiv{
Breite: 100%;
Marge-Top: 23%;
Text-Align: Mitte;
}
#aktive Label {
Anzeige: Inline-Block;
Breite: 10px;
Höhe: 10px;
Border-Radius: 5px;
Hintergrund: #bbb;
Grenzfarbe: #777;
}
#aktives Etikett: Hover {
Hintergrund: #CCC;
}
/ * Eingabemischungsüberprüfter Änderungsstil *//
#SLIDER1: Überprüft ~ #aktives Etikett: N-Child (1),
#SLIDER2: Überprüft ~ #aktives Etikett: N-Child (2),
#SLIDER3: Überprüft ~ #aktives Etikett: N-Child (3),
#Slider4: Checked ~ #aktives Etikett: N-Child (4),
#SLIDER5: Überprüft ~ #Aktive Etikett: N-Child (5) {{
Hintergrund: #333;
}
#SLIDER1: Überprüft ~ #Controls Etikett: N-Child (5),
#Slider2: Überprüft ~ #Controls Etikett: N-Child (1),
#Slider3: Überprüft ~ #Controls Etikett: N-Child (2),
#Slider4: Überprüft ~ #Controls Etikett: N-Child (3),
#SLIDER5: Überprüft ~ #Controls Etikett: N-Child (4) {
Anzeige: Block;
float: links;
Hintergrund: URL (../ img/prev.png) No-Repeat;
Rand -Links: -70px;
}
#SLIDER1: Überprüft ~ #Controls Etikett: N-Child (2),
#Slider2: Überprüft ~ #Controls Etikett: N-Child (3),
#Slider3: Überprüft ~ #Controls Etikett: N-Child (4),
#Slider4: Überprüft ~ #Controls Etikett: N-Child (5),
#SLIDER5: Überprüft ~ #Controls Etikett: N-Child (1) {
Anzeige: Block;
float: rechts;
Hintergrund: URL (../ img/next.png) No-Repeat;
Rand -Rechts: -70px;
}
#Slider1: Checked ~ #sliders Artikel: N-Child (1) .Info,
#Slider2: Checked ~ #sliders Artikel: N-Child (2) .Info,
#Slider3: Überprüft ~ #Sliders Artikel: N-Child (3) .Info,
#Slider4: Checked ~ #sliders Artikel: N-Child (4) .Info,
#Slider5: Checked ~ #sliders Artikel: N-Child (5) .Info {
Deckkraft: 1;
Übergang: Alle 0,6 Sekunden 1s;
-Webkit-Übergangs: Alle 0,6-Leichterungen 1s;
}
#Slider1: Checked ~ #sliders .inner {
Rand-Links: 0;
}
#Slider2: Checked ~ #sliders .inner {
Margin -Links: -100%;
}
#Slider3: geprüft ~ #sliders .inner {
Margin -Links: -200%;
}
#Slider4: Checked ~ #sliders .inner {
Margin -Links: -300%;
}
#SLIDER5: Überprüft ~ #sliders .inner {
Margin -Links: -400%;
}
OK, ich gebe zu, dass der obige CSS -Code sehr komplizierter und komplizierter ist, aber er erreicht wirklich einen sehr schillernden Effekt, und als ich es fertig habe, war ich auch beeindruckt von der riesigen Magie von CSS3. . .
Der Code in der ersten Hälfte davon wird hauptsächlich zur Gestaltung der Struktur des Schiebereglers verwendet, einschließlich einiger abgerundeter Ecken und der Schattenbeaufmindungsdesigns. Die zweite Hälfte enthält hauptsächlich einige Animationseffekte, um einige dynamische Effekte beim Umschalten von Bildern oder Steuertasten zu erzielen. Das Wichtigste ist jedoch die Verwendung des unteren CSS3 -Selektors, wodurch die Funktion des Bildschusses wirklich realisiert wird. Ich denke wirklich, dass Selektoren in den Beispielen eine sehr, sehr wichtige Rolle spielen, denn dies habe ich in der Vergangenheit beim Lernen von CSS3 ignoriert. Ich denke immer, dass das, was an CSS3 mächtig ist, abgerundete Ecken, Schatten, Verformungen und Animationen sind, aber dieser Code sagt uns wirklich, wie wichtig der Selektor in CSS3 ist. In einer komplexen Logik kann die Verwendung dieser CSS3 -Selektoren unvorstellbare Effekte erzielen.
4. Das Prinzip der Umsetzung der Schieberegler
Als ich den obigen Code zum ersten Mal fertig war, müssen Sie das gleiche sein wie am Anfang. Ich glaube nicht, dass ein solcher Code den Effekt von Slider erreichen kann.
Ok, lassen Sie mich das Implementierungsprinzip analysieren.
Wie ich oben sagte, ist die Top -Funkgruppe sehr wichtig und der Zentrum der Slider -Implementierung. Ja, das ist es wirklich.
Um einen Schieberegler zu implementieren, gibt es nur zwei Arten von Schalttypen, dh beim Klicken auf die Schaltfläche Steuerung wird das Bild geschaltet. Stellen Sie beim Umschalten des Bildes gleichzeitig sicher, dass alle Steuertasten korrekt angezeigt werden.
In diesem Beispiel verwenden wir Label als Steuertaste, der Artikel enthält das Bild und das innere als Behälter des Bildes.
Wenn Sie nur darüber nachdenken, können Beschriftungen und Artikel nicht miteinander verbunden werden, und es ist schwierig, die Auswahl des Artikels zu reflektieren. Es sei denn, es gibt etwas, das den Schaltstatus des Etiketts aufzeichnen und dann die Bilder in der entsprechenden Reihenfolge auswählen kann, um ihn mit einigen Mitteln anzuzeigen.
Nun, jetzt verstehen Sie, warum diese Radiogruppe der Schlüssel zur Implementierung von Slider ist. Ja, es erscheint den Klickstatus des Etiketts.
Wir verwenden die Beschriftungen für das Attribut, um dem entsprechenden Radio zu entsprechen. Wenn das Etikett angeklickt wird, wird das entsprechende Radio überprüft. Bewegen Sie dann das innere innere durch den leistungsstarken CSS3 -Selektor nach links, um das entsprechende Bild anzuzeigen. Natürlich werden die entsprechenden Tasten der linken und rechten Auswahl auch über den Selektor angezeigt. Aus dem gleichen Grund wird auch der Status der 5 Auswahltasten unten auf diese Weise realisiert, wenn die linken und rechten Schaltflächen angeklickt werden.
Das obige Implementierungsprinzip ist relativ einfach. Solange Sie den Klickstatus der Steuertaste aufzeichnen können, können Sie den Slider -Effekt über den Selektor erzielen.
Nicht nur Radiogruppen können dies auch tun, auch ein: Hover kann auch Bildschaltungen implementieren, wenn ein Schwebes gemäß dieser Idee. Natürlich gibt es viele andere Implementierungsmethoden, solange Sie das Prinzip der Implementierung verstehen.
5. Zusammenfassung
Tatsächlich macht CSS3 mit vielen Effekten wirklich Spaß. In CSS3 gibt es nur unerwartete Ergebnisse, aber niemand kann es tun. Manchmal finde ich wirklich, dass das Schreiben von CSS3 ein wenig Klugheit erfordert, und manchmal sind einige exquisite Implementierungsmethoden wirklich lobenswert.
Nun, als kleine Praxis hat dieses Beispiel viel zugenommen, insbesondere den mächtigen Selektor, was mich schäme, dass ich es in der Vergangenheit ignoriert habe. . .
Ich muss auch das Problem der diskontinuierlichen Bildschaltung berücksichtigen. Es scheint, dass ich ein wenig JS verwenden muss, um zu helfen.
Ok, teilen wir es mit, wenn es ein Ergebnis gibt.