Bună ziua, dragi cititori ai blogului. Astăzi vom învăța cum să realizăm o schimbare de culoare netedă a unui bloc folosind CSS și jQuery. Cu acest plug-in puteți obține rezultate uimitor de frumoase în design. De exemplu, puteți face un meniu interesant, care va schimba fără probleme culoarea atunci când se mișcă, și credeți-mă, arată foarte frumos.
Și așa, să începem. Mai întâi trebuie să creați cele mai comune blocuri folosind CSS. care va avea o rezoluție de 500 cu 50 de pixeli:
Am venit cu o clasă pentru viitorul bloc, de exemplu Box:
Ar trebui să obținem ceva de genul:
Acum, cel mai interesant. Avem nevoie ca cursorul să se schimbe fără probleme la culoarea specificată atunci când treceți peste acest bloc. Vom face acest lucru folosind jQuery.
Pentru a porni între etichete
și trebuie să setați următoarele:Apoi, din nou, între etichete
și copiați acest script:În cazul în care .Box este clasa bloc pe care am venit cu CSS.
"# FF4500" este culoarea atunci când hovering. 400 - viteza de animație când se hovering.
"#ffffff" este culoarea originală după ce cursorul a fost eliminat. 400 - viteza animației când mutați cursorul.
După aceea, când faci tot ce este scris mai sus, culoarea blocului se va schimba fără probleme. Pentru a introduce un astfel de bloc pe o pagină, trebuie doar să adăugați următoarele în locul potrivit:
Și blocul va apărea.
Dacă doriți să faceți ca blocurile de pe pagină să aibă culori diferite, ca în exemplul meu. Veți avea nevoie de etichete
și puneți câteva scripturi la rând și, prin urmare, nu uitați să schimbați culoarea la cea dorită. Cel mai important lucru este să schimbăm clasa, de exemplu, în exemplul de mai sus, clasa Box. iar următorul scenariu ar trebui să fie cu o altă clasă, de exemplu Box1. apoi Box2 și așa mai departe.Trimiteți-le prietenilor: