30 Mar, 2009
Kā padarīt skaistu portfeļa galeriju, izmantojot jQuery animēt!
Posted by: Mahbub In: Misc
Darot portfeļa lapu ar Flash uz jūsu mājas lapā ir kļuvis veida novecojis. Šie ar ātrāku mašīnu un jauno paaudzes pārlūku dienas var tiešām kick daži ass ar Javascript un CSS. JQuery ir ļoti veikls veids, kā tikt galā ar dažiem efektiem. Visi animācijas izriet no bāzes metodi, ko sauc "Animate". Tas atdzīvina, tweens īpašības DOM elementu. Padarīt garš stāsts īss apskatīt šo.
Tātad, jūs jau uzklikšķināt un redzēja labi? Ok, ja paskatās kodu, tas ir diezgan vienkārši.
$ (Dokuments) gatavs (funkcija (). { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") liecina (); $ ("Div.portfolio_div"). Lidināties (funkcija () { . $ (Šo) atrast ("info_container.") Animēt ({top: "0px"}, {ilgums: 400, atvieglojot: hover_in_easing}).; }, Funkcija () { . $ (Šo) atrast ("info_container.") Animēt ({top: "100px"}, {ilgums: 500, atvieglojot: hover_out_easing}).; }); / / 100 px ir lielums maskas });
Tas izmanto Animate funkcija animēt masku virs attēla, kas tiek turēti slēpta novietojuma relatīvi. Un ar atvieglošana spraudni, mēs sasniedzam dažas atdzist ietekmi veselīgs kad lidināties ārā no attēla. Jūs varat ievietot jebkuru html iekšā info_container DIV elementiem, ja vien tas nepārsniedz robežas. Paskaties stilu un jūs atradīsiet to ļoti gramatical. Jūs varat pielāgot izmērus, pārveidojot div klasēm.
Iedvesma: http://dibusoft.com/portfolio
Jaunākie komentāri