Изменение значения свойства стиля элемента

Операции с элементами Web-страницы

Изменение размеров окна

Прокрутка окна

Методы scrollTo() и scrollBy() объекта window в сочетании с методами управления временными интервалами можно использовать для плавной прокрутки содержимого окна. Первый из этих методов прокручивает содержимое окна к заданной точке с координатами x и y, второй – на заданное количество пикселей по вертикали и горизонтали. Значения смещений могут быть как положительными, так и отрицательными, т.е. содержимое окна можно прокручивать и справа налево и слева направо, и а также сверху вниз или снизу вверх. Например, функция

function scrollPage()

{

…

moveWin.scrollBy(0, -5);

…

timer = window.setInterval("scrollPage()", 100);

}

прокручивает содержимое Web-страницы вверх на 5 пикселей через 0,1 секунды.

Для прокрутки или перемещению к заданному элементу Web-страницы можно задать для этого элемента метод DOM 3

scrollIntoView().

Этот метод работает во всех Web-браузерах.

Пример 4.5.64. Прокрутка окна:

Просмотр примера: Example4-5-64.html

Текст документа HTML: Example4-5-64

Изменение размеров окна выполняется с помощью методов resizeTo() и resizeBy() объекта window. Первый метод увеличивает или уменьшает окно до заданных в параметрах ширины и высоты, второй – на заданное количество пикселей в ширину и высоту.

Для плавного изменения размеров окна также используются методы управления временными интервалами.

При увеличении или уменьшении размеров окон следует иметь в виду, что не существует максимального, ограниченного параметрами экрана размера окна, в то время, как минимальный размер экрана определяется размерами служебных элементов окна. Поэтому необходимо либо вовремя уничтожать объекты, связанные с установлением временных интервалов, например:

if (currentWidth > 500)

clearInterval(timer);

либо изменить знак параметров приращения окна, например:

dx = 5;

if (currentWidth > 500)

dx = -dx;

Пример 4.5.65. Изменение размеров окна:

Просмотр примера: Example4-5-65.html

Текст документа HTML: Example4-5-64

Методы управления временными интервалами можно также использовать для любого элемента документа HTML для создания различных динамических эффектов: плавного изменения размера текста или изображения, перемещения текста или изображения и т.п.

Задавая для элемента Web-страницы разные значения свойств стилей (например, размера текста, цвета переднего плана или фона и т.д.) с помощью методов setInterval(), setTimeout(), clearInterval() и clearTimeout() можно плавно изменять эти свойства.

Пример 4.5.66. Изменение значений свойств стилей:

1. «Пульсирующий» заголовок:

Просмотр примера: Example4-5-66-1.html

Текст документа HTML: Example4-5-66-1

2. Вывод заголовка по буквам:

Просмотр примера: Example4-5-66-2.html

Текст документа HTML: Example4-5-66-2

3. Заголовок с изменяющимся цветом

Просмотр примера: Example4-5-66-3.html

Текст документа HTML: Example4-5-66-3