Vsebina

Ustvarjanje Game Loop Razširitev HTML

Odziven postavitve

Ta tutorial prikazuje, kako ustvariti odziven postavitve, z uporabo JavaScript. V knjižnico dodate dve polji. Da eno rdečo in eno zeleno. Te škatle so le primeri. Oblike ali predmete, se lahko uporabijo.


Odziven postavitve 1

Odziven postavitve 2

Odziven postavitve 3

Dodajte polji uredniku.


Odziven postavitve 4

Poskrbi škatle, tako da jih izpolnite, levo in desno stran. Pustite obrobo okoli njih.


Odziven postavitve 5

To je zdaj primer spletne strani z vsebino na levo in desno stran. To bo videti lep naprej pult spletnega brskalnika ali telefon v ležečem načinu. Na žalost, ta postavitev ne bo delovala tudi v pokončnem načinu. Bodisi, dve polji mora uskočen majhne fit, ali razširjeni zapolni zaslon, in odrezani strani škatle.


Odziven postavitve 6

Odziven postavitve 7

Ta položaj je, kjer so potrebni odziven postavitve. V pokončni, eno polje premaknite nad drugo. Če želite to narediti, moramo premakniti škatle z uporabo JavaScript. To pomeni, sukanje ne sveže 'Uporaba časovne premice' za škatle in nastavitev a 'ID skripta'.


Odziven postavitve 8

Odziven postavitve 9

Odziven postavitve 10

Da se premaknete polja zunaj meja filma, moramo izklopiti posnetek v filmu lastnosti.


Odziven postavitve 11


Najboljše mesto urediti škatle je v je 'Na velikost' film dogodek.

So funkcije potrebujemo GetLeft, GetTop, GetWidth in GetHeight. Te funkcije dati meje brskalnika ali napravo z uporabo koordinate film. Ko posnetek vklopljena, te vrednote vrniti meje film. Če uporabljate 'None' film lestvice, GetLeft in GetTop bo vedno vrne 0 in se lahko zanemari.

Prvi omogoča poskrbi dve polji, tako da eno zapolnjuje kvaliteten in drugi zapolnjuje desni strani.



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

Odziven postavitve 13

Nato smo dodali obrobo velikosti 10. Ta vrednost 10 ni nujno v pikslih, je v istem merilu film. Uporaba film 'None' merilo za vse, kar je treba v slikovnih pikah.



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);

Odziven postavitve 15

Končno smo test da vidim, če širino spletnega brskalnika ali naprava je manjša od višine. Ko se to zgodi, preurediti polja navpično.



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);
}

Odziven postavitve 17

Zdaj lahko vidite, če spremenite velikost predvajalnika, sami bodo dve polji Samodejno razporedi. Ti dve polji zlahka mogoče nadomestiti z drugimi oblikami in predmetov. Ta primer lahko razširili ravnati bolj zapletene postavitve.


Ustvarjanje Game Loop Razširitev HTML
Ta dokumentacija je bila prevedena iz angleščini, uporabo online prevajalec. Opravičujemo se, če najdete kakšne napake. Če želite pomoč nas naredi popravke. Je prevod urednik v Hippani Animator (v meniju pomoč). Smo izžarevati prost licenca sklepnik vsakomur, ki popravlja več kot 100 stavkov. Prosimo, kontaktirajte nas za več podrobnosti.