Cum pentru a mări imaginile de pe site-ul prin intermediul javascript și css (zoom)

Acasă → tutoriale HTML și sfaturi → Cum de a mări imaginile on-line

Imaginile de pe site-ul sunt destul de comune și acestea sunt mai mari, dar designul site-ului nu este întotdeauna posibil să-l plaseze într-un format complet. Prin urmare, trebuie să ne gândim la un mod care le-ar permite să crească.

Pentru a începe cu metode primitive, si termina cel mai bun mod de a mări imaginea.

1. Creșterea imaginii printr-un link

Cel mai simplu mod, fără nici CSS. Doar pune un link către o imagine cu rezoluție înaltă.

Explicație de exemplu:

Ultimul parametru este destul de important, deoarece este de multe ori din cauza lipsei de experiență a utilizatorului poate întâlni următoarea situație: pagina de deschidere cu o imagine, el nu știe cum să se întoarcă, așa că pur și simplu închideți fila, și apoi a plecat complet site-ul. O prescriere ultimul parametru, am acoperire împotriva unui astfel de eveniment, deoarece acesta se va deschide pagina de start.

În ciuda ușurința de utilizare, această metodă nu este cel mai bun, deoarece pentru imaginea mărită trebuie să deschidă o pagină nouă, dar această metodă poate fi utilizată pentru a vizualiza imagini de toate dimensiunile. Deci, putem concluziona: dacă doriți să măriți imaginile sunt foarte mari, acesta este singurul mod sigur de a face acest lucru.

2. mărește automat imaginea atunci când treci

Numele metodei reflectă în mod clar esența ei: atunci când treceți cursorul mouse-ului deasupra imaginii se va micșora automat. Punerea în aplicare a metodei de elementare, dar, din nou, această metodă este dezavantajoasă prin faptul că este imposibil să efectueze cursorul peste imagine normală. La urma urmei, acesta va crește mereu - poate deranja utilizatorul.

Codul de mai jos pune în aplicare posibilitatea de a mări în mod automat Hover:

Explicațiile de exemplu:

• img.zoom - specifică lățimea imaginii înainte de creșterea;
• img.zoom: Hover - specifică lățimea imaginii după mărire (nici unul parametru înseamnă că dimensiunea maximă este absent);

3. Imagine când faceți clic pe

Aceasta este cea mai comună și convenabilă metodă pentru mărirea imaginilor. Și aici există mai multe căi și aplicații concrete. Luați în considerare unele dintre cele mai populare opțiuni:

3.1. Creșterea accentul activ

După un clic de mouse pe imagine, aceasta crește, dar din cauza alunecă în jos textul în jos, astfel încât această metodă nu este cel mai bun. Aici este un exemplu de cod:

Cum arată pe pagina:

3.2. Mărirea imaginii pe partea de sus a paginii

Mai jos este codul pentru punerea în aplicare a acestei metode

Cum arată pe pagina:

Opțiunile 3.1 și 3.2 se bazează în totalitate pe capacitățile CSS, și așa sunt mijloacele „de lumină“, după cum nu se încarcă pagina cu script-uri care nu sunt necesare. Există și alte opțiuni, care sunt, de asemenea, bazate pe CSS, cu toate acestea, ele sunt mai exotice. Nu le vom discuta în acest articol, deoarece unele browsere nu acceptă astfel de lucruri.

3.3. creștere frumoasă

Această metodă este cel mai frumos și confortabil în opinia mea. Pentru a conecta de a avea un pic complicat, cu adaos de diferite script-uri, astfel încât să pună în aplicare un pas cu pas uita la instalare:

Arhiva este un dosar care conține imaginea, fișierul două .js și unul .css.

2) Adăugați aceste fișiere pe site-ul dvs., deoarece acestea au în arhivă (de exemplu, directorul ar trebui să fie în imag directorul unde fișierele vor .js și .css).

3) Pe fiecare pagină a site-ului în cazul în care gradul de mărire a imaginii va fi utilizată, trebuie să conectați metoda simplebox și stil:

Te sfătuiesc să specificați calea completă la simplebox_util.js fișier. simplebox.css și simplebox.js. că acestea pot fi folosite cu ușurință pentru fiecare pagină.

Pentru a utiliza această metodă, zoom-ul, utilizați următoarea structură:

Cum arată pe pagina: