Рух елемента на Web-сторінці здійснюється шляхом зміни значень властивостей, які задають його координати.
Зміна координат елемента може бути реалізовано:
- шляхом програмно організованого циклічного процесу;
- щодо подій мишки;
- шляхом "прив'язки" елемента до курсора мишки, тобто шляхом завдання координат елемента, равними координатами курсору мишки;
- щодо подій клавіатури.
1 Зміна координат елемента за допомогою циклічного процесу
Для організації циклічного процесу можуть бути використані наступні методи об'єкта window.
- setTimeout ( "функція або вираз", інтервал [, список аргументів функції, розділених комами]). обчислює значення виразу або викликає функцію по закінченню заданого інтервалу (в мілісекундах), якщо до цього не був викликаний метод clearTimeout (). може передавати в функцію задані в списку аргументи, повертає покажчик на об'єкт таймера, який може бути використаний в методі clearTimeout () для зупинки і знищення таймера;
- clearTimeout (таймер). зупиняє таймер, встановлений методом setTimeout ();
- setInterval ( "функція або вираз", інтервал [, список аргументів функції, розділених комами]). обчислює значення виразу або викликає функцію кожен раз по закінченню даного інтервалу (в мілісекундах), якщо до цього не був викликаний метод clearTimeout (). може передавати в функцію задані в списку аргументи, повертає покажчик на об'єкт таймера, який може бути використаний в методі clearTimeout () для зупинки і знищення таймера;
- clearInterval (таймер). зупиняє таймер, встановлений методом setInterval ().
Використання методу setTimeout () для організації руху елемента показано в прикладі № 1, де реалізовано рух елемента Web-сторінки - літери Z, заданої за допомогою тега
, по траєкторії у вигляді синусоїди ():
onClick = "moveTxt ()"> Z
У прикладі 1 за допомогою функції f (x) реалізовано рух об'єкта справа наліво і зверху вниз по синусоїді y = 60sin (x). Оскільки траєкторія вказана у вигляді трігометріческой функції, для її завдання був використаний об'єкт Math, властивості і методи якого описані в розділі 3. При цьому було виконано перетворення аргументу функції sin (x) з градусів в радіани. Напрямок та швидкість руху об'єкта залежить від величини і знака збільшень його координат dx і dy. На швидкість руху також впливає проміжок часу, через який ці збільшення відбуваються (2-й параметр методу setTimeout ()).
Вибір амплітуди і швидкості руху в прикладі 1 здійснено з міркувань наочності.
Після клацання мишки по букві Z викликається функція moveTxt (), яка здійснює рух цього елемента з точки вікна браузера з координатами: left = 0; top = 100 шляхом завдання збільшень його координатами left і top:
до тих пір, поки він не наблизиться до кордонів вікна браузера (межа не досягається, щоб буква Z залишалася в області повної видимості).
Значення лівої і нижньої межі вікна браузера визначаються за допомогою властивостей тега
clientWidth і clientHeight. Ці властивості можуть бути використані для визначення розмірів будь-яких елементів Web-сторінки, які мають ширину і висоту.При використанні альтернативних методів setInterval () і clearInterval () опис функції moveTxt () необхідно дещо змінити:
function moveTxt ()
if ((z.style.pixelLeft
z.style.left = x + dx;
z.style.top = y + dy-f (x + dx);
dx + = 20;
dy + = 7;
>
else clearInterval (timer);
>
Крім того, виклик функції moveTxt () в цьому випадку слід виконувати так:
2 Зміна координат елемента щодо подій мишки
Рухи об'єктів Web-сторінки по екрану крім розглянутого вище способу зміни його координат за допомогою програмно організованого циклічного процесу, може здійснити сам користувач Web-сайту за допомогою мишки.
За допомогою змінних dx і dy. які змінюють свій знак на протіволожность при досягненні відповідно вертикальних або горизонтальних меж вікна браузера, реалізовано відображення посилання при русі по екрану від його кордонів.
Виклик функції runRef () як за подією Mousemove. так і за подією Mouseover забезпечує більш надійний захист посилання від клацання мишки.
3 Перетягування елементів
Перетягування елементів Web-сторінки за допомогою мишки реалізується шляхом привласнення поточним координатам переміщуваного елемента поточних координат мишки. Доступ до координат мишки можна здійснити, використовуючи такі властивості об'єкта event.
- clientX - повертає горизонтальну координату курсора мишки щодо клієнткою частині вікна (без урахування рамок, заголовка, рядка меню, панелі инстументов і рядка стану);
- clientY - повертає вертикальну координату курсора мишки щодо клієнткою частині вікна (без урахування рамок, заголовка, рядка меню, панелі инстументов і рядка стану);
- offsetX - повертає горизонтальну координату курсора мишки щодо елемента сторінки, що викликав цю подію;
- offsetY - повертає вертикальну координату курсора мишки щодо елемента сторінки, що викликав цю подію;
- screenX - повертає горизонтальну координату курсора мишки щодо екрану;
- screenY - повертає вертикальну координату курсора мишки щодо екрану;
- x - повертає горизонтальну координату курсора мишки щодо батьківського елементу;
- y - повертає вертикальну координату курсора мишки щодо батьківського елементу.
У прикладі № 3 створюється Web-сторінка, що містить три елементи - малюнок і два слова "ТЕКСТ" однакового розміру, але різних кольорів.
onContextmenu = "if (l == 2) l = 0; else l ++; return false"
onMousemove = "drag ()">
TEXT1
TEXT2
При натисканні мишки за допомогою одного з цих об'єктів (за подією Click) для зазначеного об'єкта встановлюється режим перетягування: в змінну n заноситься порядковий номер цього елемента Web-сторінки, наприклад, для малюнка: n = 5, для першого тексту: n = 6, для другого: n = 7 (при натисканні на вільному простору вікна браузера n приймає значення 4 - номер тега BODY).
Режим перетягування зазначеного об'єкта реалізується шляхом виклику при русі мишки (за подією Mousemove) функції drag (), яка виконує наступні дії:
- встановлює для об'єкта з номером n абсолютне позиціонування;
- присвоює горизонтальною і вертикальною координатами цього об'єкта відповідно горизонтальну і вертикальну координату покажчика мишккі, що дозволяє йому переміщатися за рухомою мишкою;
- встановлює для об'єкту поточне значення властивості z-index. заданий у змінній l.
При натисканні правою кнопкою мишки (за подією Contextmenu) циклічно змінюється значення змінної l (0,1,2,0.), Яка задає поточне значення властивості z-index. що дозволяє будь-якому об'єкту при завданні відповідного значення або перекривати інші об'кти Web-сторінки, або розташовуватися під ними.
Щоб вийти з режиму перетягування зазначеного об'єкта необхідно повторно щелчкнуть мишкою. При цьому в змінну n заноситься номер вже нового об'єкта - того, який в момент клацання знаходився під перетягувати об'єкти. Це пов'язано з тим, що при русі координати покажчика мишки на піксель випереджають координати самого об'єкта. В цьому випадку для нового об'єкта встановлюється режим перетягування (якщо тільки цим об'єктом не є тег BODY).