Движущийся элемент

Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. В следующем примере реализовано движение раздела (элемент DIV) по окружности.

Движущийся раздел текста

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JScript">

<!--

function StartGlide() {

x = parseInt(document.body.offsetWidth)/2,

y = parseInt(document.body.offsetHeight)/2,

r = 3*y/5,

dt = 0.1,

t = 0;

action = window.setInterval("Glide()",100);

}

function Glide() {

t += dt;

Banner.style.left = x + r*Math.sin(t);

Banner.style.top = y + r*Math.cos(t);

}

-->

</SCRIPT>

<STYLE TYPE="text/css"><!--

H1 {background-color:lightgrey;

font-family: Arial;

font-size: 22pt;

color: indianred;

}

--></STYLE>

</HEAD>

<BODY onload="StartGlide()">

<H1> Движущийся элемент </H1>

<P>Динамический HTML позволяет программно менять положение

элемента!</P>

<DIV ID="Banner" STYLE="position:absolute;

width: 200; background-color: lightsteelblue;">

Добро пожаловать на страницу динамического HTML!</DIV>

</BODY>

В теле документа определяется абсолютно позиционированный раздел с именем Banner. При загрузке документа вызывается функция startMove(), в которой определяются координаты x и y центра области отображения браузера, радиус r окружности и начальное значение параметра t вместе с его шагом изменения dt, используемое в параметрических уравнениях движения верхнего левого угла элемента Banner. Далее в этой же функции методом setInterval() объекта window с интервалом в 100 миллисекунд вызывается функция move(), которая и реализует перемещение во времени раздела.

Каждый раз при вызове функции move() изменяется значение параметра уравнений движения и в соответствии с ним определяется новое положение раздела — значения его свойств top и left. Уравнения движения — параметрическое уравнение окружности с центром в точке с координатами (x,y) и радиусом r.

Метод parseInt() используется в сценариях для выделения целого числа из значения свойств объектов, которые задаются вместе с размерностью. К ним относятся все размерные свойства, соответствующие атрибутам элементов HTML, и свойства каскадных таблиц стилей, задающие размеры и положение.

Динамическое изменение таблиц

Пусть в каком-либо документе задана таблица из трех рядов:

<TABLE ID="Table" border=1 cellspacing=0>

<TR>

<TD>Ячейка 1 первого ряда</TD><TD>Ячейка 2 первого ряда</TD>

</TR>

<TR>

<TD>Ячейка 1 второго ряда</TD><TD>Ячейка 2 второго ряда</TD>

</TR>

<TR>

<TD>Этот ряд перемещаем</TD><TD>Этот ряд перемещаем</TD>

</TR>

</TABLE>

Необходимо переместить ее последний ряд на место предшествующего. Для решения этой задачи используются семейства rows объекта table, в котором хранятся ссылки на строки таблицы. У объекта, представляющего строку таблицы, есть семейство cells, хранящее ссылки на все ячейки таблицы. Используя свойство innerHTML можно получить или изменить значение любой ячейки таблицы.

Приведем краткую сводку свойств, семейств и методов объектов, соответствующих элементам HTML, формирующим таблицу.

Объект table:

Семейства: all, children, cells, rows

Методы:

deleteRow([rowIndex])

insertRow([rowIndex])

moveRow(rowIndex, targetRowIndex),

Объект tr:

Свойство: rowIndex

Семейства: all, children, cells

Методы:

deleteCell([cellIndex])

insertCell([cellIndex])

Объект td:

Свойство: cellIndex

Семейства: all, children

Функция, перемещающая последний и предпоследний ряды таблицы, имеет следующий код:

Перемещение рядов таблицы

function fncInterchange(row){

var rowMove=row.rowIndex;

var rowMove_Cell1=Table.rows[rowMove].cells[0].innerHTML;

var rowMove_Cell2=Table.rows[rowMove].cells[1].innerHTML;

Table.deleteRow(rowMove);

rowMove --;

Table.insertRow(rowMove);

Table.rows(rowMove).insertCell(0);

Table.rows(rowMove).insertCell(1);

Table.rows(rowMove).cells[0].innerHTML+= rowMove_Cell1;

Table.rows(rowMove).cells[1].innerHTML+= rowMove_Cell2;

}

В переменной rowMove сохраняется индекс перемещаемого ряда, передаваемого в качестве параметра. Переменные rowMove_Cell1 и rowMove_Cell1 хранят содержимое двух ячеек перемещаемого ряда. После этих подготовительных действий ряд удаляется методом rowDelete() объекта Table, и в таблицу вставляется новый ряд перед рядом, предшествующим удаленному. Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.