Vedere principală - Piggy bank. Totul despre proiectarea, dezvoltarea și crearea site-urilor
Vizualizare principală - un blog despre design, web design și dezvoltare web. Dacă sunteți în curs de dezvoltare site-uri web, sau sunteți interesat în web design și pur și simplu de proiectare lucruri care ne înconjoară, sau sunteți doar interesat în tema de web design și dezvoltare web, atunci acest blog va fi foarte util pentru tine. Pe blog puteți găsi articole, recenzii, lecții și multe altele.
Poate, mulți s-au confruntat cu sarcina de a crea un efect interesant când plasați mouse-ul peste imagine. Desigur, există o mulțime de efecte diferite care animă foarte mult site-ul datorită faptului că utilizatorul vede răspunsul la acțiunile lor. Recent am avut nevoie de aplicarea efectului de zoom atunci când plasați cursorul pe mouse. Am crezut că implementarea acestui efect ar putea fi de interes pentru dvs.
Cum arată
Cum funcționează
Pentru început, întotdeauna definim miniaturile și creăm un container care să conțină imaginile noastre. Am ales aceste dimensiuni: miniatură în forma sa normală are o dimensiune de 150x150 pixeli și când plasați cursorul mouse-ului, dimensiunea sa se modifică la 250x250 pixeli. Am ales în mod deliberat o scară atât de mare încât să vă arate lucrarea efectului în sine. De fapt, este mai bine să faceți diferența nu este foarte mare, astfel încât efectul pare mai neted.
Deci, structura noastră:
După aceasta, trebuie să atribuim reguli CSS pentru fiecare element. Sarcina noastră este să construim o miniatură cu CSS într-o singură linie orizontală. Fără regulile CSS, miniaturile urmează vertical în spatele celeilalte.
Adăugați următorul cod:
După acest pas, obținem locația dorită și aspectul miniaturilor noastre. Realizăm acest lucru prin adăugarea funcției jQuery. Codul este foarte simplu și nu trebuie să-i explic munca. Creăm două funcții care gestionează evenimentele de orientare și de focalizare a cursorului mouse-ului.
Adăugați codul la pagina din secțiunea de etichete
Sper că nu ați uitat să conectați chiar biblioteca jQuery înainte.
În timpul procesului de lucru, funcțiile nu numai redimensionează imaginea, dar și o schimbă. După cum se vede, mă mișc orizontal și vertical cu 50 de pixeli. Dacă utilizați alte dimensiuni, trebuie să recalculați pentru cazul dvs. o nouă valoare pentru aceste compensări. De exemplu, în cazul în care miniaturile are dimensiunea originală de 100x100 pixeli, și le crește până la 200x200 pixeli, diferența față poate fi definită ca (200-100) / 2 = 50 pixeli. În acest caz, a coincis cu părtinirea mea, dar alte sensuri, desigur, vor fi diferite.
Aceasta este întreaga implementare a efectului de creștere a imaginii atunci când se deplasează mouse-ul. Sper că această lecție vă va fi utilă. Vă mulțumesc pentru atenție.
Stați la curent
Prin citirea acestui site sunteți de acord cu utilizarea cookie-urilor. În caz contrar, părăsiți acest site. Sunt de acord