Движущийся элемент.
В следующем примере рассмотрим, как можно организовать движение элемента по странице. Из курса по статическому HTML известно, что позиционирование элемента задается свойствами top и left (координатами x и y). Если организовать изменение значений этих свойств во времени, то получится эффект движения. Мы изменяем координаты элемента страницы, заданного тэгом <DIV>. Тэг <DIV> служит для выделения части страницы, он задает контейнер для группы других элементов. В представленном в данном пособии примере- это картинка в тексте.
Движение организуется при помощи двух функций: startmove() и move(). Первая из них делает некоторые начальные установки и запускает вторую функцию, которая изменяет координаты элемента страницы. При этом функция move() вызывается периодически с помощью метода setinterval().В дальнейшем мы часто будем использовать этот метод.
Событие, вызывающее функцию startmove() является Onload() .Это означает, что функция выполняется сразу же после загрузки страницы. В результате элемент будет перемещаться в заданной области страницы, изменяя направление движения при достижении границ области.
Вот пример программы с движущимся элементом.
Кажущаяся замысловатость функции move() объясняется тем, что требуется организовать отражение движущегося элемента от границ области. Нужно обратить внимание, что функция move() запускается из функции startmove() , причем к ней применяется метод setinterval() объекта окна window:
window.setinterval("move()",100);
Этот метод запускает в качестве первого параметра функцию (в нашем случае move() ) через каждые 100мс. Изменяя второй числовой параметр, можно ускорить или замедлить движение элемента. В теле функции startmove() используется область dynamic, которая была определена в тэге <DIV>. Стандартная функция parseint() преобразует строковые значения в целые числа. Дело в том, что используемые свойства элементов возвращают значения в виде символьных строк, а не чисел. Поскольку они используются в числовых операциях, требуется сначала привести их к числовому типу.
Следует заметить, что при чтении текстов HTML-программ следует сначала разобраться с основной частью, находящейся внутри тэга <BODY>, а затем уже перейти к рассмотрению сценария внутри тэга <SCRIPT>. Это потому, что сценарий обычно расположен вначале, а использует индентификаторы, определенные в конце HTML-программы.
Элемент движется к месту указанному мышью.
Теперь рассмотрим сценарий, приводящий к тому, что картинка сначала неподвижная, двигается к месту экрана, где произошел щелчок. Этот сценарий аналогичен предыдущему. Используем свойства x и y объекта event(событие), которые содержат координаты мыши в момент щелчка (событие On Click). Далее вычисляются новые координаты (px и py) картинки так, чтобы расстояние между нею и местом щелчка уменьшилось. Формулы вычисления координат выбраны таким образом, чтобы скорость движения уменьшалась по мере приближения к выбранному параметру:
px=px+(x_mouse-px)/100;
py=py=(y_mouse-py)/100;
В этих формулах число 100-просто масштабирующий коэффициент. Переменные x_mouse и y_mouse — координаты места щелчка. Заметим, что как только координаты щелчка станут равными соответствующим текущим координатам элемента, последние уже не будут изменяться: элемент остановиться. Напомним, что метод setinterval(”move()”, 100) запускат функциюmove() через каждые 100 мс.
Дата добавления: 2016-02-11; просмотров: 614;