Sima cseréje egy kép egy másik használó css sprite
Képek használata változás nagyon könnyen elvégezhető a CSS segítségével. Meghatározott elem háttérképet, majd annak pszeudoelem: hover változtatni a background-image. A legjobb módja az lenne, hogy összekapcsolják a két képből egy, és a használata a váltás a background-position. Ez a technika az úgynevezett sprite CSS. És ha kell fokozatosan helyettesíti egyik képről a másikra, hirtelen változásokat?
A probléma megoldása az, hogy egy további eleme az eredeti ingatlan értéke a nulla értéket és átlátszóságát tulajdonságok background-position, állítsa be a kívánt értéket. Ezután a pszeudo elem: hover fokozatosan változik az átláthatóságot. Három mód, hogy a meghatározott műveletet. Megmutatjuk példa kis nyilak.
Módszer Egy (ésszerű előrehaladást)
Tedd a span az eredeti elem. Ezen időtartam elem megjelenik az aktivált állapotban van. Igen, a túlzott jelölés - ez rossz, de szükségünk van egy további elemet, és a pszeudo-elem nem támogatja az átmenetek a legtöbb böngészőben.
Arrow CSS kép csere és helyét a háttérben az alapértelmezett helyzetbe.
Ez használ viszonylagos elhelyezése a span elem. ami lesz elhelyezve teljesen azonos méretű. A helyzet a háttérben átkerülnek a helyére a kép váltás. Az átláthatóság nullára van beállítva, és fogják használni CSS3 átalakítás tegyük vissza a helyére.
Aztán, amikor az aktiváló elem változik átláthatóság:
Második módszer (csúcs-technológiák)
Az egyetlen ok, hogy használjuk az elem span - abban az időben az írás leckét csak Firefox 4 támogatja átalakulás a pszeudo elemek. Logikus azt feltételezni, hogy a jövőben, és a többi WebKit böngésző támogatja őket. Meg tudjuk változtatni az elrendezés a következő:
És a CSS kód majdnem ugyanaz, csak mi használjuk: miután helyett span:
A harmadik út (támogatás működési idő)
CSS kód szinte ugyanaz, mint a fent azonosított módszerek, de lényegesen egyszerűbb, mivel nem használunk pszeudo-osztályok és az átalakulás.
jQuery fogja ellenőrizni csillapítás. Először is elrejti az elem span. Ezután csatolja funkció feldolgozásra mouseenter mouseleave és lebeg eseményeket a zajcsökkentő funkciót megvalósítani.
Mindhárom módszert alkalmaznak, bizonyítani oldalon.
5 óra utolsó oszlopában „CSS”
Csekély hatása interaktív animációs karakter.
Kis fogalma szórakoztató tipp, hogy végrehajtsák az SVG és anime.js. Amellett, hogy a speciális stílust a példában realizált animáció és az átalakulás, a grafikus objektumok.
Kísérlet: animált SVG betűk alapján anime.js könyvtárban.
Cool weboldal megjelenítését a kísérlet, amelyben a „first-person” a napszemüveg.
A kísérleti script legördülő navigációt.
krómozott változata jQuery nem szántani.
Ezután az eke nem szántani maga próbálta ha jQuery haladéktalanul állítsa vissza az eke, és ha poigratsya 1. és 2. példa a kurzort a jQuery nem fog működni
Nos, tetszett!
A Chrome 1 munkába szabályok 2 nem sima, 3 úgy működik, akkor nem. Más böngészők, szabványok, IE, mint mindig.
A Chrome 3 utas leáll, ha a nyíl, hogy gyorsan vissza, és távolítsa el, egér, többször is.
art_reklama_com
A Chrome minden 3 módszer megfelelően működik
Denis Nikanorov
alacsonyabb simán, de amikor egyszerűen „rántotta” kurzor az egész lapot, majd teljesen leállt. Kiveszem a szemetet :) Legyen a varázsló befejezi gomb „jQuery”, és hogy miután működött olyan jól, mint az első alkalommal!
Chrome-ban futó Internet Explorer 9 mutatja a második és harmadik gomb Firefox említett problémákat. Az én Firefox-om a többség, így én megvárom a korrekció, de most azzal van elfoglalva, az ő honlapján.
gigantvirus
Nem működik IE6.
IE6 kell elfelejteni :)), és általában nem IE böngésző, és a „Changeling” helyek))
emberek. de miért használja span? Véleményem megteheti: .Strelka
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!