Реферат Курсовая Конспект
Организация движения объектов на 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 странице с помощью языка JavaScript... Обработка событий на Web странице...
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Организация движения объектов на Web-странице
Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:
Твитнуть |
Новости и инфо для студентов