HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

ball2.style.pixelWidth = ball2.style.pixelHeight = 16;

ball3.style.pixelWidth = ball3.style.pixelHeight = 16;

ball4.style.pixelWidth = ball4.style.pixelHeight = 16;

ball5.style.pixelWidth = ball5.style.pixelHeight = 16;

</SCRIPT>

</DIV>

<SCRIPT type = "text/javascript" src = "balls.js"></SCRIPT>

</BODY>

</HTML>

Здесь предполагается использование пяти изображений из папки balls. Как видно из примера, чтобы сценарий нормально работал с координатами и размером изображений, соответствующие свойства пришлось установить не в CSS, а опять же с помощью сценария.

Во внешний файл вынесен сценарий, отвечающий за перемещение изображений (файл balls.js). Cодержимое файла balls.js выглядит следующим образом (пример 13.12).

Пример 13.12. Содержимое файла balls.js

//Массив со ссылками на объекты-изображения шариков var balls = [ball1, ball2, ball3, ball4, ball5];

//Массивы скоростей по горизонтали и вертикали (от –10 до 10)

var xSpeed = [rand(–10,10), rand(–10,10), rand(–10,10),

rand(–10,10), rand(–10,10)];

var ySpeed = [rand(–10,10), rand(–10,10), rand(–10,10),

rand(–10,10), rand(–10,10)];

//Минимальные значения координат изображений var minX = ball1.style.pixelLeft;

var minY = ball1.style.pixelTop;

//Максимальные значения координат изображений var maxX = area.style.pixelWidth + minX – balls[0].style.pixelWidth;

var maxY = area.style.pixelHeight + minY – balls[0].style.pixelHeight;

//Назначаем функцию обновления изображения, вызываемую по таймеру window.setInterval(redraw, 100);

//Функция генерации случайных значений function rand(min, max){

return Math.random()*(max–min)+min;

}

//Функция обновления координат и перерисовки изображений function redraw(){

var i, newX, newY;

for (i=0; i<balls.length; i++){

//Вычисляем новое положение шарика newX = balls[i].style.pixelLeft + xSpeed[i];

newY = balls[i].style.pixelTop + ySpeed[i];

//Проверка столкновения с границами if (newX > maxX){

newX = maxX;

xSpeed[i] = –xSpeed[i];

}

else if (newX < minX){

newX = minX;

xSpeed[i] = –xSpeed[i];

}

if (newY > maxY){

newY = maxY;

ySpeed[i] = –ySpeed[i];

}

else if (newY < minY){

newY = minY;

ySpeed[i] = –ySpeed[i];

}

//Наконец, перемещаем изображение balls[i].style.pixelLeft = newX;

balls[i].style.pixelTop = newY;

}

}

В следующем примере рассматривается сценарий, позволяющий случайным образом изменять цвет текста, для которого задан определенный стилевой класс. Стилевой класс в примере имеет название colored. Пример разбит на две части: собственно сценарий (файл coloredtext.js) и HTML‑документ, использующий возможности этого сценария.

Для начала рассмотрим сам сценарий, код которого приведен ниже (пример 13.13).

Пример 13.13. Содержимое файла coloredtext.js

//Поиск всех элементов, имеющих класс «colored»

var i, j = 0;

var elements = [];

for (i=0; i<document.all.length; i++){

if (document.all(i).className == "colored"){

elements[j] = document.all(i);

j++;

}

}

//RGB-составляющие цвета текста var R = 0, G = 0, B = 0; //По умолчанию цвет черный

//Назначаем функцию перерисовки window.setInterval(redraw, 50);

//Функция генерации случайных значений function rand(min, max){

return Math.random()*(max–min)+min;

}

function redraw(){

//Вычисляем новые значения составляющих цвета

R += rand(–8, 8);

R = (R>=0) ? R : 0;

R = (R<=255) ? R : 255;

G += rand(–8, 8);

G = (G>=0) ? G : 0;

G = (G<=255) ? G : 255;

B += rand(–8, 8);

B = (B>=0) ? B : 0;

B = (B<=255) ? B : 255;

//Установка нового цвета для всех элементов for (i=0; i<elements.length; i++){

elements[i].style.color =

"rgb(" + R + "," + G + "," + B + ")";

}

}

Этот сценарий работает следующим образом. После загрузки содержимого документа (для этого файл должен подключаться к документу перед закрывающим тегом </BODY>) производится просмотр всей коллекции all документа, и в массив elements помещаются ссылки на все элементы, имеющие стилевой класс colored. Кроме обозначения элементов, цвет которых нужно изменять, этот стилевой класс больше ни для чего не используется.


-= 168 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня