рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Организация движения объектов на Web-странице

Организация движения объектов на Web-странице - раздел Образование, Тема: Обработка событий и изменение свойств объектов на Web-странице   Режим Позиционирования Объекта, Т.е. Помещения Его На Экран З...

 

Режим позиционирования объекта, т.е. помещения его на экран задается с помощью свойства CSS position, которое имеет следующие значения:

static - положение объекта на экране задается браузером в соответствии с порядком, в котором объект указан в HTML-документе (режим задан по умолчанию и не использует координат объекта);

relative - положение объекта на экране задается с помощью координат относительно того места на экране, куда браузер поместил бы объект в режиме static;

absolute - положение объекта на экране задается с помощью его координат относительно левого верхнего угла экрана.

 

Движение объекта на Web-странице осуществляется путем изменения свойств, задающих его координаты. В CSS координаты объекта задаются с помощью свойств left и top.

Свойство left задает горизонтальную координату объекта, которая в случае позиционирования в абсолютных координатах (position:absolute) задает расстояние в пикселях от левой границы экрана.

Свойство top задает вертикальную координату объекта, которая в случае позиционирования в абсолютных координатах задает расстояние в пикселях от верхней границы экрана.

При движении объекта важно знать размеры экрана браузера. Свойство объекта <BODY> document.body.clientWidth указывает на ширину экрана в пикселях, а свойство document.body.clientHeight - на высоту экрана в пикселях.

В примере № 1 показано применение средств CSS и JavaScript для организации движения буквы Z (тэг <P>) из точки с координатами: left=0; top=200 слева направо по синусоиде: f(x)=50sin(x). Для того, чтобы буква в конце движения осталась внутри экрана в качестве линий окончания движения приняты линии в 25 пикселей от правой и верхней границ экрана.

Отметка объекта осуществляется по щелчку мыши (буква становится красной). Движение начинается по нажатию любой клавиши клавиатуры.

 

Пример 1

 

<HTML>

<HEAD>

<TITLE>Движение объектов на Web-странице </TITLE>

<SCRIPT>

T=0; X=0; Y=200;

function f(x)

{

return 50*Math.sin(x*Math.PI/180); // x указан в градусах

}

function moveZ() //Движение буквы Z

{

with (document.all(n))

if ((style.pixelLeft<document.body.clientWidth-25)

&& (style.pixelTop>25))

{

style.pixelLeft=X+T;

style.pixelTop=Y-f(T);

T+=10; //Скорость движения

setTimeout("moveTxt()",250)

}

}

</SCRIPT>

</HEAD>

<BODY onKeydown="moveZ()">

<P style="color:blue;font-size=8mm;

position:absolute;left:0;top:200"

onMouseover="window.event.srcElement.style.color='red';"

n=window.event.srcElement.sourceIndex"> Z

</BODY>

</HTML>

– Конец работы –

Эта тема принадлежит разделу:

Тема: Обработка событий и изменение свойств объектов на Web-странице

Доступ к свойствам объектов на Web странице с помощью языка JavaScript... Обработка событий на Web странице...

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Организация движения объектов на Web-странице

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

Доступ к свойствам объектов на Web-странице с помощью языка JavaScript
  В соответствии с объектной моделью документа DOM (Document Object Model), которая поддерживается языком JavaScript, все объекты (тэги) Web-страницы помещены в коллекцию (набор) docu

Обработка событий на Web-странице
  К событиям на Web-странице относятся как действия пользователя, связанные с работой с мышью и клавиатурой, так и действия браузера, связанные с загрузкой, выгрузкой Web-страниц и др

Доступ к отмеченным объектам на Web-странице
  В лабораторной работе 9 "Изменение свойств объектов на Web-странице" был рассмотрен способ доступа к объектам на Web-странице с помощью их идентификаторов. Этот метод прос

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги