Március 30, 2009
Hogyan készítsünk egy szép portfolió Galériába jQuery animálása!
Írta: Mahbub In: Egyéb
Csinálsz egy portfolió oldalon a Flash weboldalán vált egyfajta elavult. Ezek a napok a gyorsabb gép és az új generációs böngésző tényleg rúgni a seggüket a Javascript és CSS. JQuery nagyon ügyes módja annak, hogy bizonyos hatások kezelésére. Minden animációk erednek az alap módszer az úgynevezett "animálása". Ez serkenti, kiskamaszok a DOM elemek tulajdonságait. Ahhoz, hogy a hosszú történet rövid, nézd meg ezt.
Tehát, ha már kattintott, és látta, ugye? Ok, ha megnézi a kódot, ez elég egyszerű.
$ (Document). Ready (function () { hover_in_easing var = "easeOutExpo"; hover_out_easing var = "easeOutBounce"; $ (". Info_container"). Show (); $ ("Div.portfolio_div"). Lebeg (function () { $ (This). Találni (". Info_container"). Animálni ({top: "0px"}, {duration: 400, megkönnyítve: hover_in_easing}); }, Function () { $ (This). Találni (". Info_container"). Animálni ({top: "100px"}, {duration: 500, megkönnyítve: hover_out_easing}); }); / / A 100 px van a méret a maszk });
Használja animate függvény animálni a maszk alatt a képet, amelyet elrejtettünk beállítási viszonylag. És enyhítése plugin, érjük el néhány jó hatása pattogó ha lebeg ki a képet. Tudod, hogy minden HTML belül info_container DIV elemeket, amíg nem lép túl a határokon. Nézd meg a stíluslapot, és megtalálod, hogy nagyon gramatical. Testre szabhatja a méretek megváltoztatásával a div osztályok.
Inspiráció: http://dibusoft.com/portfolio
Legutóbbi megjegyzések