Съдържанието

Създаване на линия игра Разширяване на HTML

Отзивчиви оформления

Този урок показва как да създадете чувствителни оформления, използвайки JavaScript. Добавете две полета в библиотеката. Направете една червена и една зелена. Тези кутии са само примери. Всички фигури или обекти могат да бъдат използвани.


Отзивчиви оформления 1

Отзивчиви оформления 2

Отзивчиви оформления 3

Добавете полетата на редактора.


Отзивчиви оформления 4

Подредете кутии, така че те запълни лявата и от дясната страна. Оставете граница около тях.


Отзивчиви оформления 5

Това сега е пример за web страница със съдържание от лявата и дясната страна. Тя ще изглежда добре на работния плот web браузър или телефон в режим пейзаж. За съжаление това оформление няма да работи добре в режим "портрет". Или, двете кутии трябва да се свива, малки да се поберат, или разширени да запълни екрана, и по стените на клетките отрязан.


Отзивчиви оформления 6

Отзивчиви оформления 7

Тази ситуация е, когато са необходими отзивчиви оформления. В портретен режим една кутия трябва да се движат над друг. За да направите това, ние трябва да преместите полетата с помощта на JavaScript. Това означава изключване 'Използвате времева скала' кутии, както и за настройка 'ИД на скрипт'.


Отзивчиви оформления 8

Отзивчиви оформления 9

Отзивчиви оформления 10

За да преместите полетата извън границите на филма, ние трябва да изключите клип в свойствата на филма.


Отзивчиви оформления 11


Най-доброто място да подредите полетата е в 'При преоразмеряване' филм събитие.

Функциите трябва са GetLeft, GetTop, GetWidth и GetHeight. Тези функции дават границите на уеб браузър или устройство с помощта на координатите на филма. Когато клип е включен, тези стойности се връщат границите на филма. Ако използвате "няма такива" филм скала, GetLeft и GetTop ще връща винаги 0 и могат да бъдат пренебрегнати.

Първо позволява организира две кутии, така един запълва лявата страна и другата изпълва дясната страна.



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

Отзивчиви оформления 13

На следващо място ние ще добавите граница на размер 10. Тази стойност на 10 не е непременно в пиксели, е в същата скала на филма. Използвайте филма "Няма такива" скалата за всичко да е в пиксели.



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

Отзивчиви оформления 15

Накрая ние ще тества дали ширината на уеб браузъра или устройство е по-малко от височината. Когато това се случи, пренаредите полетата вертикално.



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

Отзивчиви оформления 17

Сега можете да видите, ако можете да преоразмерите играчът, двете кутии ще се организира автоматично. Тези две кутии лесно могат да бъдат заменени с други форми и обекти. Този пример може да бъде разширена, за да се справят с по-сложни подредби.


Създаване на линия игра Разширяване на HTML
Тази документация е преведена от английски език, използвайки онлайн преводач. Извиняваме се, ако забележите някакви грешки. Ако искате да ни помогне да корекции. Там е редактор на превод в Hippani Animator (в меню Помощ). Ние давам вън свободен позволение ключов камък към всеки, който коригира повече от 100 фрази. Свържете се с нас за повече подробности.