Hozzon létre egy lebegő blokkal
Ebben az útmutatóban odafigyelünk egy nagyon érdekes bővítményt, adatlap, könyvtár - nevezzük, amit akar. Annak érdekében, hogy jobban megértsék a beépített modul, alkalmazza azt a kis projekt.
Mivel a webes fejlesztők, meg kell foglalkozni minden nap néhány kész funkciók történik, legyen az egy kis részletet, vagy egy freymvork. Ha az ötlet nem egyedi követelményeknek, akkor valószínű, hogy meg fogja találni néhány kész darab, hogy megoldja a problémát. De mint általában az ilyen leletek vannak tervezve széles közönség számára.
Ezért, továbbra is egy sor órák egyes plug-inek, hatások, és a fejlett technika. Ha a beépülő modulok kis, megtesszük őket egymástól, és hogyan történik a varázslat. Ellenkező esetben hozzon létre a kis projektek ahhoz, hogy megértsük, hogyan lehet használni a valós világban.
Ismerje meg a stickyFloat
Itt van néhány információ:
De lássuk be, ez a lehetőség nem fog ugyanaz minden böngészőben. Ez a probléma a sok namuchalas, lapozgatott mindenféle lehetőségeket, és a végén még meg kell gondolni, hogy erre a célra is jobb, hogy egy script.
Amire szükségünk a tartalomra lebegett az oldalon, ha tovább megyünk fel és le, de a szülő tartályba.
Mivel a web-és köre igen széles, könnyen talál egy eszköz, hogy megoldja ezt a problémát. Nézzük az egyiket, egy praktikus és megbízható véleményem.
bontani a logika
A logika a plugin meglehetősen egyszerű. Hadd bizonyítani neked. Emlékezz, milyen funkciókat hajtja végre a bővítmény? Ez létrehoz egy lebegő elem:
Nézzünk egy kis makett, szerkezetét mutatja oldalunkon:
A munka a plugin meg tudja különböztetni az alábbi lépéseket:
- Kiszámítja a jelenlegi helyzetben a szülő elem lebeg a dokumentumot. A kép van megjelölve 1.
- Gets a magassága a szülő - így tudjuk, mikor kell leállítani a lebegő elem, azért még nem lépett túl a szülő. Jelzett 2.
- Számítani, hogy mennyi lementünk - erre van szükségünk adatokat a szülő - így voltunk benne, hogy nem megfelelő. A kép található, amely fölött egy hipotetikus vízszintes vonal szolgál a felső határa a jelenlegi kijelző. Ebben az esetben a távolság lesz a távolság a két pont közötti alkotó vonalat. Jelzett 3.
- Segítségével ezeket az értékeket, hogy mi fent kiszámított, tanulhatunk, amit el kell hárítani a helyzet a lebegő elem könnyen.
Ha nem értik meg, ne aggódj. Nézzük meg a következő példát:
- A lebegő elem a parttól 10px a tetején a szülő.
- szülő magassága 100px.
- Felhasználói le 50px az egyik esetben egy másik meg 150px.
Ismerve ezt az információt, akkor lehet számolni, hogy:
Az első esetben - a lebegő elem nem szabad mozgatni. Miért? Mivel nem süllyedt a belek az oldal, és még mindig van néhány hely maradt, amely megjelenik a képernyőn.
A második esetben - mi lesz csúszás. Amikor most az 150px, 10 kap a távolságot a lebegő elem és a szülő, a többi kap a különbség a két pont a korábban említett.
Ha még mindig nem ért semmit, így nem csüggedjetek. Lesz még egy esélyt, ha megnézzük a kódot.
elemzési kód
Ez a plugin mindössze 30 sornyi kódot. Most azt szeretnénk feldolgozni, minden vonalon, és magyarázza a jelentését. bővítmény kód:
1. lépés - A szokásos kezdő pont a bővítmény jQuery. Mint tudja, a lehetőségek paraméter egy speciális objektum, amely inicializálási adatok a plugin. lockBottom, meghatározza, hogy a lebegő elem alján egy szülő vagy eltűnnek. Ez mind.
2. lépés - Jut az elem. Ebben az összefüggésben az erre utal a DOM-elem, hogy mi jut el a funkciót. Például ha telt #menu módszer, a ez fog mutatni az oldalelemek az azonosítóval.
3. lépés - Számolja ki a belső párnázás a szülő elem és tárolja az adatokat későbbi felhasználásra.
4. lépés - Itt kiszámítottuk a helyzetben a szülő elem, egy beépített jQuery offset módszerrel. Nem csak azt kell alkalmazni az elem. A változó $ obj tartalmaz lebegő elem. Olvassa el a jQuery API dokumentációt, ha nem ismerik ezeket a módszereket.
5. lépés - ezek az intézkedések gyakran látható a fejlesztés plug-in jQuery. Általánosságban elmondható, hogy jó gyakorlat, hogy a változók alapértelmezett értékeit.
6. lépés - A bővítmény lesz a gyakran használt CSS felső értéket, ezért kell tulajdonítani a lebegő elem abszolút pozíció, ha még nem csináltam ilyet.
7. lépés - amelyet fent kifejtettem, miért van szükség az értéke lockBottom. Ha ez igaz, akkor elkezdi csinálni számításokat. Kiszámítjuk a pontot, amely szerint meg kell pozícionálni a tételt.
Általában ez lehet tenni, hogy kiszámítjuk a magassága a szülő, az úszó egység minden margó, de ez a lehetőség vezethet kiszámíthatatlan következményekkel jár.
9. lépés - Először is, meg kell állítani az összes animáció, amely jelen van az oldalon. Ehhez használja a stop módszer.
10. lépés - a három változót értékeket tartalmaznak, hogy szükségünk van a jövőben.
- pastStartOffset ellenőrzi, hogy vajon mi a felső határ a szülő elem telt el. Ne felejtsük el, mi használ, ofszet, hogy megtalálják a teteje közötti távolság és a szülő elem. Ahhoz, hogy tudjuk, milyen messzire jutottunk le scrollTop használat módszert. Ez a távolság között az elején a dokumentum és a jelenlegi helyzetben a lebegő egységet.
- objFartherThanTopPos ellenőrzi, hogy a lebegő elem abban a helyzetben, feltéve alapértelmezésben - a tetején a szülő elem. Ha emeljük a lapot a szélén egy szülő, ebben az esetben nem indít a mozgást.
- objBiggerThanWindow ellenőrzi, hogy a magassága nagyobb, mint a méret a lebegő elem ablakot. Ha igen, akkor nincs értelme, hogy ezt a hatást.
11. lépés - Ez az a hely, ahol a dugó kiszámítja, hogy szükséges az elemet. A folyamat a következő:
- Ellenőrizzük, hogy a felhasználó kiszámítja a tartományban a szülő elem. Azt is ellenőrizze a helyzetét a lebegő elem: függetlenül attól, hogy felfelé vagy lefelé.
- Mint már említettük, akkor használja a beépülő modul csak ha a méret a lebegő elem nem haladja meg a az ablak méretét.
Kezdjük az animáció, ha mindkét feltétel igaz.
12. lépés - Itt vagyunk meghatározni egy változó newpos, amely megtartja a helyzetbe, amelyben meg kell alakítani a lebegő elem. Mint tudja, a számítások könnyebb megérteni, ha alaposan vizsgálja meg a képet elején a leckét. Szerezd meg a távolságot, amelynél költöztünk, adjuk hozzá a távolság a felső behúzás szülő és vonjuk ki a távolság az oldalt a szülő - ezért itt. Ezek a számítások segít nekünk, hogy a távolság pixelben, amely helyzetben van szükségünk, hogy egy lebegő elem.
13. lépés - Ha leértünk tartomány alatt összesen csak fel ezt az elemét a helyzet az alsó határ.
14. lépés - Ha mentünk túl a felső határokat, akkor nem ugyanaz a dolog csak egy másik értékkel.
15. lépés - Ez az! Mi csak ezt az animációt keresztül jQuery eljárás élő, átadva az első helyen a kapott értéket.
használata
Ha nem érti, hogyan kell használni ezt a modult, itt egy példa:
Most írjunk egy kis projekt, amely használja a plugin.
Á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!