Saturs

Veidojot spēli Loop Paplašina HTML

Atsaucīgi izkārtojumus

Šī apmācība parāda, kā izveidot atsaucīgi izkārtojumus, izmantojot JavaScript. Pievienot bibliotēkai divas kastes. Veikt vienu sarkanu un vienu zaļu. Šajos lodziņos ir tikai piemēri. Var izmantot jebkuru formas vai objektus.


Atsaucīgi izkārtojumus 1

Atsaucīgi izkārtojumus 2

Atsaucīgi izkārtojumus 3

Pievienot redaktoru kastes.


Atsaucīgi izkārtojumus 4

Kastes, sakārtot, lai tie aizpildītu kreisajā un labajā pusē. Atstāt apmali ap tiem.


Atsaucīgi izkārtojumus 5

Tagad tas ir tīkla web lappuses piemērs ar satura kreisajā un labajā pusē. Tas izskatās labi uz darbvirsmas tīmekļa pārlūkprogrammu vai tālruni ainavas režīmā. Diemžēl, šis izkārtojums nestrādās arī portreta režīmā. Nu, divas kastes ir sarukusi, mazs, lai ietilptu vai paplašināta, lai aizpildītu ekrānu un kastes malas nogriezt.


Atsaucīgi izkārtojumus 6

Atsaucīgi izkārtojumus 7

Šī situācija ir tāda, kur nepieciešami atsaucīgi izkārtojumus. Portreta režīmā, viena kaste ir jāpārvieto virs otra. Lai to paveiktu, mums ir nepieciešams pārvietot lodziņus uz vietu, izmantojot JavaScript. Tas nozīmē izslēgt 'Izmantojiet laika skalas' kastes, gan nosakot 'Skripta kods'.


Atsaucīgi izkārtojumus 8

Atsaucīgi izkārtojumus 9

Atsaucīgi izkārtojumus 10

Lai pārvietotu ārpus kastes filmu, mums ir nepieciešams, lai izslēgtu klipu filmu rekvizītos.


Atsaucīgi izkārtojumus 11


Labākā vieta, kur organizēt kastes ir 'Par izmēra mainīšanas' filmas notikumu.

Funkcijas, kas mums ir GetLeft, GetTop, GetWidth un GetHeight. Šīs funkcijas sniedz interneta pārlūku vai ierīci, izmantojot filmu koordinātas robežas. Ja klips ir ieslēgts, šīs vērtības atpakaļ filmas robežas. Ja jūs izmantojat "Neviens" filmu mērogu, GetLeft un GetTop vienmēr atgriež 0, un to var ignorēt.

Pirmkārt, ļauj sakārtot divas kastes, lai vienu aizpildījumu pa kreisi un otru ievieto labajā pusē.



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

Atsaucīgi izkārtojumus 13

Tālāk, mēs pievienot apmales izmēru 10. Šī vērtība ir 10 nav obligāti pikseļos, tas ir vienu un to pašu filmu apjomu. Izmantojiet filmu mēroga "Neviens" visam jābūt pikseļos.



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

Atsaucīgi izkārtojumus 15

Beidzot mēs tests vai tīmekļa pārlūkprogrammu vai ierīces platums ir mazāks augstums. Kad tas notiek, pārkārtot kastes vertikāli.



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

Atsaucīgi izkārtojumus 17

Tagad jūs varat redzēt, ja jūs maināt atskaņotāja izmērus, divas kastes organizē paši automātiski. Šīs divas kastes var viegli aizstāt ar citu formas un objekti. Šajā piemērā var paplašināt rīkoties vairāk sarežģītu izkārtojumu.


Veidojot spēli Loop Paplašina HTML
Šī dokumentācija tika tulkota no angļu valodā, izmantojot online translator. Atvainojamies, ja atrodat kļūdas. Ja jūs vēlaties, lai palīdzētu mums veikt labojumus. Tur ir tulkojumu redaktors Hippani Animator (izvēlnē Palīdzība). Mēs dodam no bezmaksas licences atslēgas, lai ikviens, kurš novērš vairāk nekā 100 frāzes. Lūdzu, sazinieties ar mums, lai saņemtu sīkāku informāciju.