Hogyan készítsünk egy csúszkát CSS és HTML nélkül javascript

Egyszerű kapcsolási csúszka animációs képkockák

Megjegyzés: Ebben a példában fogok összpontosítani a legújabb CSS tulajdonságait. A kód nem tervezték, hogy a régebbi böngészők.

Létrehozásának megkezdéséhez egy csúszka ezt a kódot:

Container csúszka - div class a sliderA. Minden keret a csúszka leírt tromya címkék:

• Radio gomb (input type = „radio”), felelős a feltétel a keret (látható / nem látható)
• Felcímkézni. megjelenítéséért felelős a navigációs gombokat a csúszkát.
• Div tag, hogy a keret tartalmát.

Kezdjük a munkát a stílust. tartály:

Arra kérjük a rögzített méretű konténer. Én meg őket egyenlő a képek méretét, hogy fogom használni ezt a példát. Az ingatlan position: relative kell állítani egy új referenciapont helyzetét beágyazott konténerek. Az ingatlan text-align: center tettem hozzá, a központtól a szalagot a címkék gomb, amit akkor kell elhelyezni, mint inline-elemekkel.

Jeleníti meg a rádió gombjai nem kell, hogy elrejtse őket:

Azt, hogy a címkék gombra. Kód sokat, de semmi bonyolult:

Én meg a tulajdonság display: inline-block. amely elhelyez egy címkét egy sorban, és igazítsa őket a közepén, mint a belső elemek, és egyúttal felkéri őket egy fix méretű, mint egy blokk. Aztán meg a szélesség és a magasság, valamint a sarok sugara, a háttér színe és a keret színe. Mindez azt eredményezi, hogy az a tény, hogy a címke megjelenik a formájában a kis kerek gomb.

kurzor segítségével beállíthatja a megjelenése az egér kurzor lebeg a gombot. Azt az értéket a mutató. azaz Az egérmutató ugyanaz lesz, mint amikor az egérrel egy linket ( „ujj”).

z-index tulajdonság kötelező megjelölni gomb tetején fekszik a csúszka keretben. Ugyanezen beállított pozíció tulajdonság: relatív - egyébként z-index nem fog működni.

margin-right hozzáteszi padding a gombok és a felső 90% mozgatja őket az a tartály aljára. Lehet meg a függőleges helyzetben a gombok sokkal intelligensebben, de itt szorítkozom ezen a módon.

Azt is meg a háttér színét a lenyomott gomb és a gombok, amelyek mozgatni az egeret. Tulajdonság határozza meg az átmenet animáció változtatni a háttérben.

Is, mi kell távolítani terek és a sortöréseket a címkék közé a csúszka, mint használ display: inline-block, akkor nekünk az extra terek között a kulcsokat. Így tettünk az előző cikkben. Most nem ezt, hogy egyszerűsítse a felfogása HTML kódot.

Az eredmény egy ilyen üres csúszka:

Hozzáadása stílusok div-ek, ahol a keret tartalma a következő lesz:

Az összes keret fogja elfoglalni az ugyanabban a helyzetben. position: absolute lehetővé teszi, hogy távolítsa el blokkok a falról, és távol önkényesen. tetején. maradt. jobbra. alsó keret koordináták beállítani, hogy a keret elfoglalja az egész tartály csúszkát teljesen. z-index küld keretek keret kapcsoló gomb, különben nem látjuk ezeket a gombokat sem, nem nyomja meg.

Most a legfontosabb része a csúszka - megjelenítése vagy elrejtése a keretben, attól függően, hogy a gomb megnyomásakor. A hagyományos megközelítés, hogy elrejtse oldalelemek a tulajdonságok használatával display: none mi nem egészen illik. Végtére is, a csúszka szeretnék zökkenőmentes átállás a személyzet, de a CSS nem teszi lehetővé, hogy állítsa be a kijelzett érték az animáció segítségével az átmeneti szabályokat.

Lágy elrejtése és megjelenése személyzet kell két tulajdonsággal: fedőképesség és láthatóságát; és az átmeneti.

átlátszatlanság tulajdonság lehetővé teszi, hogy egy decimális beállítani az átláthatóság az oldal elemek, 0-tól (teljesen átlátszó), hogy 1 (teljesen átlátszatlan). Például, az opacitás: 0,5 - opacitás 50%.

De még teljesen átlátszó elem, bár láthatatlan, továbbra is reagálni gombra kattintással. Ezért, ha Ön a csúszka linket, kattints a linkre indíthatnak nem egyirányú link, ami látható a képernyőn.

Ahhoz, hogy teljesen eltávolítani az elemet, és azt átlátható kattintással, el fog tartani egy második tulajdonság: visibility: hidden. A láthatóság azonban nem teszi lehetővé, hogy beállítsuk a részleges átlátszóságot. Element bármilyen látható vagy sem.

Ezért fogjuk használni az átmenet animálni mindkét tulajdonságot a kívánt hatás eléréséhez minket. A módszer lényege a következő:

• Amikor a felhasználó kikapcsolja a keret, egy új keret jelenik meg a visibility: visible. de opacitás: 0.
• Ezután az animáció abszorpciós értékeket mindkét kereteket. A régi keretben simán nullára esik, és az új - fokozatosan emelkedik egységét.
• Befejezése után az animáció, a láthatóság, a régi keret beállítása rejtve. így nem zavarja kattintással az új keret.

Itt egy kódot kaptam:

Azt is hozzá egy szabályt a p tag a kereten belül, hogy a feliratok a képek:

Hozzáfűzi HTML-kód csúszka példánk:

És itt jutunk a következő eredménnyel:

Sunrise át a szigeten

Egyszerű kapcsolási csúszka animált keretek, a második kiviteli alak

A csúszka lehet elhelyezni, mint a szokásos kép és bármilyen szöveges linkek más oldalakra az oldalon, és így tovább.

Abban az esetben, ha a csúszka segítségével elhelyezésére egyszerű képek (például, ha egy turista, és közzéteszi a fotókat az utazás), van egy vágy, hogy javítsa a csúszkát úgy, hogy rákattint egy csúszka, ami az átmenetet a következő képet. Az előző példában a csúszka keretek vannak kapcsolva csak kerek gombok, és nyomja meg a kép maga nem csinál semmit.

Usovershestvuem a csúszkát. A csúszka sablont hozzá még egy címkét minden keret:

Mint látható, a címke után jön az első keret, a második keret aktiválódik. Tag található a második keret aktiválja a harmadik keretben; miután a harmadik - chertvorty. Az utolsó címke aktiválja az első keretet.

Címkék helyezzük úgy, hogy fedezze az egész csúszka és a hazugság felett a kép, de a gombok alatt a szalag. Címkék átlátszó, így látható át a keret tartalmát. Ha egy képet mutat N számú vele jel jelenik mozgatni a keret N + 1 (Az utolsó képkocka - az átmenet tag az első képen.)

Így, amikor a felhasználó rákattint a képre váltott aktiválása a következő képet. eredmény:

Sunrise át a szigeten

Hogyan hozzunk létre egy kép maga változik, mint a diavetítés?

Mint egy rügy, ami nem működik van egy csúszka, ellenőrzött nem kapcsol

Lehetséges, hogy az input vmete div. pl ha mozog a készülék az egyik oldalról a folyamatosan változó kép?

Másoltam minden pontosan, de nem tudtam a csúszkát. A tetején és 5 képpont alatt függőlegesen 5 grafika egyszerűen behelyezhető. Hogyan erősít? Vagy lehet, továbbá, hogy szükség van az írásra?