Obsah

Vytvorenie hra slučky Rozšírenie HTML

Citlivý rozloženia

Tento tutoriál ukazuje ako vytvoriť citlivý rozloženia pomocou JavaScriptu. Pridajte dve krabice do knižnice. Aby jeden červených a jeden zelený. Tieto boxy sú len príklady. Všetky tvary alebo objekty by mohli byť použité.


Citlivý rozloženia 1

Citlivý rozloženia 2

Citlivý rozloženia 3

Pridať polia editora.


Citlivý rozloženia 4

Usporiadať boxy, tak oni vyplniť ľavej a pravej strane. Ponechať orámovanie okolo nich.


Citlivý rozloženia 5

To je teraz príklad webovej stránky s obsahom na ľavej a pravej strane. To bude vyzerať poriadku na ploche webový prehľadávač alebo telefón v režime na šírku. Bohužiaľ, Toto rozloženie nebude dobre fungovať v režime portrét. Buď dve krabice musia zmenšil malé prispôsobiť, alebo rozšírenej na celú obrazovku, a po stranách boxy odrezať.


Citlivý rozloženia 6

Citlivý rozloženia 7

Táto situácia je, kde sú potrebné reagovať rozloženia. V režime portrét, jeden box mala pohybovať nad sebou. K tomu potrebujeme presunúť krabice pomocou JavaScriptu. To znamená vypnutí 'Pomocou časovej osi' krabice a nastavenie 'Skript ID'.


Citlivý rozloženia 8

Citlivý rozloženia 9

Citlivý rozloženia 10

S cieľom posunúť do polí mimo hranice filmu, musíme vypnúť klip vo vlastnostiach film.


Citlivý rozloženia 11


Najlepším miestom na usporiadanie boxov je v 'Na zmenu veľkosti' filmov udalosť.

Funkcie potrebujeme sú GetLeft, GetTop, GetWidth a GetHeight. Tieto funkcie dať hranice webového prehliadača alebo zariadením pomocou súradníc filmu. Zapnutým klip, tieto hodnoty vráťte hranice film. Ak používate "Žiadny" film rozsahu, GetLeft a GetTop sa vždy vráti 0 a môžu byť ignorované.

Po prvé umožňuje usporiadať dve krabice tak, jeden vyplní ľavej a iné výplne pravej strane.



BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Citlivý rozloženia 13

Ďalej pridáme orámovanie veľkosti 10. Táto hodnota 10 nie je nevyhnutne v pixeloch, je v rozsahu filmu. Použitie filmu stupnice "Žiadny" všetko v pixeloch.



var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

Citlivý rozloženia 15

Nakoniec budeme testovať, či šírka webového prehliadača alebo zariadenia je menšia ako výška. Keď sa to stane, vertikálne usporiadanie políčok.



var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

Citlivý rozloženia 17

Teraz môžete vidieť, keď zmeníte veľkosť prehrávača, dve krabice zariadi sami automaticky. Tieto dve krabice je možné ľahko nahradiť iné tvary a objekty. Tento príklad môže byť rozšírený zvládnuť Komplexnejšími formami.


Vytvorenie hra slučky Rozšírenie HTML
Táto dokumentácia bola preložená z angličtiny, pomocou on-line tlmočník. Ospravedlňujeme sa, ak nájdete nejaké chyby. Ak by ste chceli pomôcť nám opravy. Tu je preklad editor v Hippani Animator (v ponuke Pomocník). Sme rozdávať zadarmo licenčné kľúče pre každého, kto opravuje viac ako 100 fráz. Prosím, kontaktujte nás pre viac informácií.