Cum de a schimba imaginea atunci când treceți cursorul pe ea, sau un pic despre planare efectele

Efectele modificărilor elementului paginii web atunci când cursorul mouse-ului este adesea numit cu mouse-ul efecte. Acest lucru se datorează faptului că punerea în aplicare a unor astfel de efecte, folosind pseudo: planare. care definește stilul unui element atunci când treceți mouse-ul peste ea.

În primul rând, ia în considerare opțiunea este mai ușor. Să presupunem că ați inserat o imagine pe pagină, așa cum se arată mai jos:

Și să spunem că trebuie să-l schimbe de la afișarea atunci când treceți peste ea cu cursorul mouse-ului. Când inserați imaginea la dobvim tag-ul img atribut class = „animate1“. apoi codul HTML al imaginii va arăta astfel:

Pentru început, aveți posibilitatea să treceți pur și simplu pentru a face imagine clară. Pentru transparență în proprietatea CSS opacitate se întâlnește. care se referă la CSS3. Valoarea utilizată numere fractionare 0 - 1 în cazul în care la zero corespunde transparență totală, și o unitate, dimpotrivă, opacitatea obiectului. Pentru versiunile mai vechi de Internet Explorer trebuie să utilizați proprietatea filtru cu o valoare de alfa (Opacitate = X). din moment ce acestea nu susțin proprietatea de opacitate. În loc de X va trebui să înlocuiască un număr de 0 la 100, unde 0 indică o transparență completă, și 100 - opacitate completă.

Apoi, pentru a face imaginea clară atunci când deplasați cursorul la fișierul de stil, sau între tag-uri și html-fișier, trebuie să adăugați următorul cod css-:

În cazul în care nu sunt familiarizați cu CSS, voi explica că img.animate1 de înregistrare: Hover spune browser-ului că toate elementele , cu o clasă de atribut animate1 egal atunci când treceți peste ele cursorul mouse-ului, se aplică aceste stiluri. A specificat stiluri între acolade <и>. Dacă este făcută corect, ar trebui să obțineți ceva de genul:

Puteți face imaginea în translucidă sa starea inițială, iar atunci când treceți peste el nu transparent. Apoi, în CSS-fișier trebuie să adăugați următoarele linii:

Filtru img.animate1: alpha (Opacity = 25);
opacitate: 0,25;
>
img.animate1: filtru hover: alpha (Opacity = 100);
opacitate: 1;
>

Rezultatul va fi:

Pentru un efect suplimentar, puteți încetini schimbările în transparența imaginii. Puteți utiliza proprietatea de tranziție CSS. care stabilește un efect de tranziție între două state membre. Adăugați, de exemplu, o secundă lent. Apoi, codul nostru CSS va fi după cum urmează:

Filtru img.animate1: alpha (Opacity = 25);
opacitate: 0,25;
-Moz-tranziție: toate 1s ușurința în-out; / * Efectul de tranziție pentru Firefox la versiunea 16.0 * /
-webkit-tranziție: toate 1s ușurința în-out; / * Efectul de tranziție pentru Chrome la versiunea 26.0, Safari, Android și iOS * /
-O tranziție: toate 1s ușurința în-out; / * Efectul de tranziție pentru Opera la versiunea 12.10 * /
tranziție: toate 1s ușurința în-out; / * Efectul de tranziție pentru alte browsere * /
>
img.animate1: filtru hover: alpha (Opacity = 100);
opacitate: 1;
>

Cu proprietăți transforma imaginea poate fi scalate, rotit, mutat, înclinat. Să încercăm să le mări imaginea. Apoi css-codul va fi:

img.animate1 - Moz-tranziție: toate 1s usurinta;
- webkit-tranziție: toate 1s usurinta;
- O tranziție: toate 1s usurinta;
tranziție: toate 1s usurinta;
>
img.animate1: hover - Moz-transformare: scală (1.5); / * Efectul de transformare pentru Firefox la versiunea 16.0 * /
- webkit-transformare: scală (1.5); / * Efectul de transformare pentru Chrome la versiunea 26.0, Safari, Android și iOS * /
- o-transformare: scală (1.5); / * Efectul transformării Operei la versiunea 12.10 * /
- ms-transformare: scală (1.5); / * Efectul de transformare pentru IE 9.0 * /
transformare: scală (1.5); / * Efectul de transformare pentru alte browsere * /
>

Iar rezultatul va fi:

Pentru a mări imaginea, puteți adăuga o poftă de mâncare. Apoi, stiluri css variază ușor:

img.animate1 - Moz-tranziție: toate 1s usurinta;
- webkit-tranziție: toate 1s usurinta;
- O tranziție: toate 1s usurinta;
tranziție: toate 1s usurinta;
>
img.animate1: hover - Moz-transformare: rotate scală (360deg) (1.5);
- webkit-transform: rotate scală (360deg) (1.5);
- o-transformata: rotate (360deg) scara (1.5);
- ms-transform: rotate (360deg) scara (1.5);






transforma: rotate (360deg) scală (1.5);
>

Mai sus am considerat cazul când animarea parte o imagine. În continuare, ia în considerare modalități de a înlocui o imagine în alta. În acest caz, se prepară, de obicei, două imagini de aceeași dimensiune, una pentru vizualizarea de bază, iar cealaltă pentru înlocuirea acestuia.

Să presupunem că avem două imagini, una neagră, iar cealaltă culoare albă:

Fă-l astfel încât atunci când treceți peste negru și alb culoarea de afișare a imaginii. Pentru a face acest lucru, imaginea originală va face fundalul unui div cu un fundal de proprietate. Și când navednii cursorul pe imagine se va schimba imaginea de fundal cu ajutorul aceluiași pseudo-Hover și proprietate fundal. Pentru a realiza acest efect pe pagina HTML adăuga un element div cu o clasă rotate1:

Și adaugă următoarele descrieri de stiluri:

fundal div.rotate1: URL-ul (img / 2.jpg); / * Calea către fișierul cu modelul original * /
lățime: 480 x; / * * Lățime imagine /
Înălțime: 360 pixeli; / * Inaltime * figura /
>
div.rotate1: hover background: url-ul (img / 1.jpg); / * File Path cu model interschimbabil * /
>

Această metodă are un dezavantaj major. Deoarece a doua imagine este încărcată numai atunci când cursorul este, în cazul în cazul în care utilizatorul are o conexiune la internet lent, și dimensiunea fișierului cu dimensiunea imaginii este mare, imaginea se va întâmpla cu unele pauză. Prin urmare, următoarea privire la câteva modalități de a înlocui imagini pe mouseover.

Următoarea metodă se bazează pe combinarea a două imagini într-un singur fișier. Să presupunem că avem nevoie pentru a pune pe un buton pagină, care atunci când treci peste ea cu cursorul mouse-ul pentru a schimba aspectul. În acest scop, cele două imagini sunt combinate într-un singur fișier, iar imaginea rezultată va arăta în felul următor:

În acest caz, trecerea de la un model la altul se realizează prin deplasarea imaginii de fundal pe verticală, cu un fundal poziție de proprietate. Pentru că atunci când faceți clic pe butonul de obicei, trece la o altă pagină, apoi lipiți imaginea în celulă . Apoi, într-o pagină HTML se introduce următorul cod:

Și în css-fișier ca aceasta:

Și nu în ultimul pentru astăzi modul în care este atunci când o imagine este plasată sub celălalt cu ajutorul poziției reguli css: absolută. În acest caz, plasat într-un container div două imagini:

Și adaugă css-stiluri:

Poziția animate2: relativă;
margin: 0 auto; / * ustanvalivaem cu elementul div centrat pe pagina * /
lățime: 480 x; / * Latime * /
Înălțime: 360 pixeli; / * Inaltime * /
>
.animate2 poziție img: absolută; / * Poziționare absolută * /
stânga: 0; / * Aliniați imaginea din colțul din stânga sus al div-a * /
top: 0; / * Aliniați imaginea din colțul din stânga sus al div-a * /
>

După adăugarea regulilor de css, imaginile vor fi plasate sub unul pe altul. Acum, controlul de transparență pentru imagini folosind proprietatea de opacitate într-o stare normală va arăta a doua imagine, și când cursorul prima. Pentru a face acest lucru, într-o stare normală de a face poza cu clasa întâi pe deplin transparente, iar atunci când cursorul este opusul: o imagine cu clasa a doua va fi pe deplin transparente, iar cu prima clasă nu este transparent:

Este posibil de a realiza o tranziție lină către regula finală adăugarea proprietății de tranziție CSS:

animate2: hover img.second. animate2 img.second: hover opacitate: 0;
Filtru: alpha (opacity = 0);
-Moz-tranziție: toate 2s usurinta;
-webkit-tranziție: toate 2s usurinta;
-O tranziție: toate 2s usurinta;
tranziție: toate 2s usurinta;
>

Iar dacă adăugați proprietatea de transformare:

animate2: hover img.second. animate2 img.second: hover opacitate: 0;
Filtru: alpha (opacity = 0);
-Moz-transformare: scara (0, 1);
-webkit-transformare: scara (0, 1);
-o-transformare: scală (0, 1);
-ms-transformare: scală (0, 1);
transformare: scală (0, 1); / * Reduce lățimea imaginii la 0 * /
>

Prin combinarea diferitelor proprietăți CSS pot fi realizate în diferite efecte hover la schimbarea imaginilor în timpul mouseover. Acestea și alte exemple am pus pe aceasta pagina. Acolo puteți descărca codul sursă. Asta e tot, până când ne vom întâlni din nou.

este calea către imaginea nu a cerut adevărat. Codul ar trebui să urmărească, prea puține informații.

Deci, e simplu.

Să presupunem că aveți două imagini de 100 de 100 pixeli. Pentru a face din ei unul prin plasarea prima imagine din partea de sus, al doilea din partea de jos. Veți obține imaginea 1-200.

Pe pagina, a face unitatea de dimensiunea imaginii originale: 100 cu 100, și a stabilit ca imagine de fundal obținută.

Se dovedesc a fi vizibile doar jumătatea superioară a imaginii de fundal, de exemplu, Primul desen.

O planare sunt Polarizarea modelul de flux folosind fundal poziția pe 100px în sus, adică zadaeta background-position: 0 -100px;

În acest caz, va fi vizibil jumătatea inferioară a monitorului - a doua imagine.

Aleatoare Încărcați o imagine cu imagine specifică Hovers (rollover) / imagini aleatoare pe script mouseover /

Funcția randomPick (arr)

var selectat = arr [Math.floor (Math.random () * arr.length)]

Multumesc pentru articol. Realizat pe site-ul dvs. efect animate4 - funcționează! Au fost câteva întrebări: stiluri, este imperativ să prescrie? Am încercat mai întâi să se înregistreze în fișierul CSS - nu a funcționat. Și altul. Pe măsură ce aceste stiluri de a lucra pe un site mobil? După ce cursorul nu este de fapt efectuează acest clic funcție pe fotografie. I se deschide când faceți clic pe fotografia de pe un alt site. Aș dori să-și păstreze această funcție, dar cu introducerea de noi stiluri animate4 ea a dispărut. Și cum să pună în aplicare revenirea imaginii la dimensiunea normală? click undeva în apropiere? Nu funcționează. Poate acest lucru, de asemenea, într-un fel să se înregistreze?

Dean: Bună ziua!

Stilurile pot fi prescrise în css-fișier. Se pare că ai undeva o greșeală.