Hogyan készítsünk egy csúszkát CSS és HTML
Egy korábbi cikkben, megbeszéltük, hogyan előírni egy egyszerű csúszka CSS nélkül JS-szkripteket. Most vizsgáljuk meg a másik lehetőség szétcsúsztatható kialakítás - a gombok „előre” és „vissza”.
Egyszerű csúszka a CSS gombokkal „előre” és „vissza”
Mielőtt tovább olvasni a cikket, azt ajánlom, hogy olvassa el az előző cikkben. amely részletesen megvitatták a kód egy egyszerű csúszka.
De a CSS is fúj egy kis agy:
Mi meg fogja érteni, hogy mi történik itt. Kérünk egy gombot négyzet blokk mérete (szélessége és magassága 80 pixel), és a tulajdonságai border-radius kapcsolja be a kör. Elhelyezése is teljesen úgy, hogy a bal fele a blokk határa a tartályba. Mivel a tulajdonság overflow: hidden tartály, minden ment annak határain kívül, van vágva. Így kapunk két félkör.
Ahhoz, hogy központosítani magassága a gombot, a következő módszert. Ki a felső gomb: 50%. Így a felső határ a gomb lesz a közepén a tartályba. Azt is jelzik, transzformáció - képest magasságukban eltolt helyzetű 50%: transzformáció: translateY (-50%). A százalékos arányokat az átalakulás, mérjük nem a méret a szülő elem (tartály), és a méret a blokk. Ily módon a blokk elmozdul a felére magassága fel. Ennek eredményeként, a központ a blokk egy vonalban van a magassága a tartály központ.
Beljebb a gombokat kell hívni egy nyíl a bal és jobb nyíl. A pszeudo: miután, és felhívni egy nyíl formájában a megfelelő Unicode karaktereket.
Align nyíl beállító, egy másik technika függőleges igazítás: egy előre meghatározott magassága egyenlő a magassága a konténer sorok (line-height: 80px).
Foglalkozott, hogyan kell megjeleníteni a gombot. Most módosítani a kódot, hogy a csúszka a korábbi cikket az ilyen kulcsokat.
Egyedi pár kulcsot kell minden csúszka keretben. Az első fázis „Vissza” gomb aktiválja az utolsó keret, és a gomb „Next” - a második keretben. A második frame „Vissza” gomb aktiválja az első keretet, és a gomb „Next” - a harmadik keretben. És így tovább. Kiderül az alábbi kódot:
eltávolítjuk az ahhoz kapcsolódó összes régi gombok, és új gombokkal a fenti példában a stíluslap az előző csúszka:
Az eredmény egy csúszka:
Sunrise át a szigeten
