Alinierea în centru folosind javascript și css

Windows. Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 9.0+ [1]. Safari 3.1+, SeaMonkey 1.0+.

Linux. Firefox 1.0+, Chromium, Opera 9.0+ [2]. SeaMonkey 1.0+.







1. Containerul este centrat dacă rezoluția ecranului monitorului este egală sau mai mare de 1024x768 - [Deschideți pagina cu eșantion]

2. Rezervorul este centrat, dacă rezoluția ecranului este egală sau mai mare decât 1024x768 + hover mouse-ul pe link-ul într-unul dintre elementele conținutului paginii - [Open-page exemplu]

HTML / XHTML. cod:

2. În corpul acestei pagini, este creat un element A (gri) al nivelului blocului cu dimensiuni specificate explicit, de exemplu 800 x 500 pixeli și poziționarea relativă. [Rezultat].

HTML / XHTML. cod:

HTML / XHTML. cod:

dacă (wresolution> = 1024 hresolution> = 768)

var element_A = window.getComputedStyle (document.getElementById ('element_A'), '');

document.getElementById ( 'element_A') .style.left = (w-element_A_width) / 2 + 'px';

document.getElementById ( 'element_A') .style.top = (h-element_A_height) / 2 + 'px';

document.getElementById ( 'element_A') .style.left = (w2-element_A_width) / 2 + 'px';

document.getElementById ( 'element_A') .style.top = (h2-element_A_height) / 2 + 'px';

HTML / XHTML. cod:

HTML / XHTML. cod:

Cel mai simplu caz este considerat - pentru a demonstra însăși posibilitatea și principiul său - de a schimba dinamic poziția unui element în zona vizibilă a ferestrei browserului.

Primul caz







Stare. dacă rezoluția ecranului monitorului este egală sau mai mare de 1024 cu 768 de pixeli, apoi să aliniați conținutul paginii în lățime și înălțime

Se creează un element A cu lățimea și înălțimea explicită. Determinat prin rezoluția ecranului - o anumită valoare stabilită, care va servi drept condiția în care script-ul va fi declanșat, de exemplu - 1024x768. În cazul în care script-ul detectează că rezoluția ecranului este egală sau mai mare de 1024 x 768 pixeli, apoi executați restul funcției, care își găsește dimensiunile (definite într-un stil de fișier extern al proprietăților CSS) elementului A. lățimea și înălțimea zonei vizibile a ferestrei browser-ului. Folosind numărul obținut se calculează distanța de la marginea din stânga și de sus a regiunii vizibile a ferestrei browser-ului ar trebui să fie lăsat și marginea superioară a elementului care ar fi elementul A. A este aliniat cu centrul de lățimea și înălțimea. În ceea ce privește numărul și CSS, acest lucru este în cazul în care proprietatea CSS „stânga“ element al A este egală cu jumătate din diferența dintre lățimea zonei vizibile a ferestrei browser-ului și lățimea elementului A. și CSS proprietate element de „sus“ a lui A este egală cu jumătate din diferența dintre suprafața vizibilă a înălțimii ferestrei browser-ului și înălțimea elementului A .

Întrucât utilizatorul poate redimensiona fereastra browserului după ce pagina este deja încărcată, modificările dimensiunii ferestrei browserului sunt urmărite. Și cu fiecare schimbare, o caracteristică ce centrele elementului A, lățimea și înălțimea, este condusă de un nou și re-aliniază elementul A în centru, lățimea și înălțimea la noua dimensiune a zonei vizibile a ferestrei browser-ului.

Cel de-al doilea caz

Stare. în cazul în care rezoluția ecranului este egală sau mai mare de 1024 x 768 pixeli, iar atunci când planare mouse-ului pe link-ul în elementul A. apoi aliniați conținutul paginii lățimea și înălțimea

Deoarece utilizatorul poate redimensiona fereastra browserului după ce pagina este deja încărcată, se va monitoriza redimensionarea ferestrei browserului, ca în primul caz. Și cu fiecare schimbare, o caracteristică ce centrele elementului A, lățimea și înălțimea, este condusă de un nou și re-aliniază elementul A în centru, lățimea și înălțimea la noua dimensiune a zonei vizibile a ferestrei browser-ului.

În principiu, funcționează cu Opera 7.5, dar cu erori pentru un număr de pixeli.

În principiu, funcționează cu Opera 7.5, dar cu erori pentru un număr de pixeli.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: