Движение на елемента в уеб-страница се постига чрез промяна на стойността на имотите, които определят неговите координати.
Промяна на координатите на елементите може да се прилага:

• програмен организирана от цикличен процес;
• върху събитията на мишката;
• от "свързване" елемент към курсора, т.е. елемент чрез определяне координати, координатите на ravnymy на курсора на мишката;
• за клавишни събития.

1 Промени елемент координира използване цикличен процес

Следните методи на прозореца обект могат да бъдат използвани за организиране на цикличен процес.

• setTimeout ( "функция или експресия" интервал [списък на функционални аргументи разделени със запетая]). изчислява стойността на експресията или нарича функция на изтичането на предварително определен интервал (в милисекунди), ако преди метод clearTimeout () не е причинена. може да предава на функцията посочено в списъка аргумент, връща указател към таймера за обект, който може да се използва в clearTimeout () метод за спиране на таймера и унищожаване;
• clearTimeout (таймер). спира таймера, определен от setTimeout ();
• setInterval ( "функция или експресия" интервал [списък на функционални аргументи разделени със запетая]). Тя изчислява стойността на експресия или функция нарича всеки път на изтичане на интервала (в милисекунди), ако метод преди clearTimeout () не се нарича. може да предава на функцията посочено в списъка аргумент, връща указател към таймера за обект, който може да се използва в clearTimeout () метод за спиране на таймера и унищожаване;
• clearInterval (таймер). спира таймера, определен от setInterval ().

Използване на елемент метод setTimeout () за организиране на движението № показано в Пример 1, където движението се осъществява уеб-страница елемент - буквите Z, определен от маркера

, по траектория под формата на синусоида ():

OnClick = "moveTxt ()"> Z

В Пример 1, с използване на функцията F (х) осъществява обект движение от дясно на ляво и отгоре надолу от синусоида у = 60sin (х). Както е посочено по траектория trigometricheskoy функции за обект математика, свойства и методи, които са описани в раздел 3. задача се използва Трансформацията се провежда аргумент функция грях (х) от градуси в радиани. Посоката и скоростта на обекта зависи от големината и знака на DX на стъпки и ди неговите координати. При скорост също влияе на интервала от време през който се наблюдава нарастване (2-ро параметър на setTimeout на ()).

Избор на скоростта на движение и амплитуда в пример 1, се извършва за по-голяма яснота.

Чрез кликване на мишката върху буквата Z се извиква функция moveTxt (), който извършва движението на този елемент от прозореца на браузъра географски позиции: ляв = 0; топ = 100 стъпки, като посочите координатите на своето ляво и отгоре:

толкова дълго, колкото той не идва в близост до границите на прозореца на браузъра (на границата не се достига до буквата Z остана в пълен изглед).

Стойностите на ляво и долната част на границите на прозореца на браузъра се определят от свойствата на маркер clientWidth и clientHeight. Тези свойства могат да бъдат използвани за определяне на размера на всички елементи на уеб страници, които имат ширина и височина.
При използване на алтернативни методи setInterval () и clearInterval () Описание moveTxt () функция трябва да бъде малко по променили:

функция moveTxt ()
ако ((z.style.pixelLeft30))
z.style.left = х + DX;
z.style.top = Y + ди-е (х + DX);
DX + = 20;
Dy + = 7;
>
останало clearInterval (таймер);
>

В допълнение, функцията за повикване moveTxt () в този случай трябва да се направи, както следва:

2 Промяна събитие мишка координира елемент

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

С DX на променливи и Dy. че промени знак на противоположности съответно когато хоризонтални или вертикални границите на прозореца на браузъра, реализирани позоваване размисъл, когато се движат по екрана от нейните граници.

Обадете runRef () функция, така Mousemove събитие. и в случай Mouseover осигурява по-голяма защита от връзките щракнете с мишката.

Плъзгането елементи 3

Плъзгане елементи Web страници с помощта на мишката се осъществява чрез възлагане на тока координира превод елемент на текущите координати на мишката. Достъп до координатите на мишката може да се осъществи с помощта на такива свойства на обекта на събитието.

• clientX - връща хоризонталата координира на курсора на мишката по отношение на клиент на прозореца (без рамки, с глава, лентата с менюта, instumentov бар и бар статус);
• clientY - връща вертикалната координата на курсора на мишката по отношение на клиент на прозореца (без рамки, с глава, лентата с менюта, instumentov бар и бар статус);
• offsetX - връща хоризонталата координира на курсора на мишката по отношение на страница елемент, задействал събитието;
• offsetY - връща вертикалната координата на курсора на мишката по отношение на страница елемент, задействал събитието;
• screenX - връща хоризонталата координира на показалеца на мишката върху екрана;
• screenY - връща вертикалната координата на показалеца на мишката върху екрана;
• х - връща хоризонталата координата на курсора на мишката по отношение на елемент майка;
• Y - връща вертикалната координата на курсора на мишката по отношение на елемент майка.

Пример номер 3 се създава уеб-сайт, съдържащ трите елемента - рисунката и две думи "текст" със същия размер, но различни цветове.

onContextmenu = "ако (л == 2) л = 0; друго л ++; върне фалшиви"
onMousemove = "плъзгане ()">

TEXT1

TEXT2

Когато щракнете с мишката върху някоя от тези обекти (Event клик) на маркиран обект е зададен режим на плъзгане: променлива п се записва поредният номер на този елемент уеб-страница, например, за рисуване: п = 5, първият текст: п = 6 за второ: п = 7 (когато потребителят кликне върху свободно място на прозореца на браузъра стойността е по-4 - брой BODY таг).

Drag Mode маркиран обект се изпълнява от обаждане по време на движение на мишката (от Mousemove събитие) функцията влачене (), който прави следното:

• определя броя п на обекта с абсолютен позициониране;
• възлага на хоризонталните и вертикалните координати на обекта, съответно хоризонтално и вертикално координира myshkki показалка, която му позволява да се движи движещ ръка;
• определя текущата стойност на обект Z-индекс. определени в променливата L.

При кликване върху дясното копче (за Contextmenu събитие) варира циклично променлива стойност л (0,1,2,0.), Задава текущата стойност на Z-индекс. което позволява всеки обект, чрез създаване на подходяща стойност, или се припокриват друг анализ обработва уеб-страница, или са разположени отдолу.

За отмяна на плъзгане значително обект трябва да бъде повторно При кликване на мишката. В този случай, броят на променливата п въведен нов обект - този, който кликне време е бил под влачат обекта. Това се дължи на факта, че по време координира движението на показалеца на мишката върху пикселни координатите на обекта напред. В този случай, новия обект е зададен режим на плъзгане (освен ако обектът не е маркера BODY).