Шрифт:
// элемента е строку s:
е. setAttributefstyle", s);
е.style.cssText = s;
// Обе инструкции, следующие ниже, получают значение атрибута style
// элемента е в виде строки:
s = е.getAttribute("style");
s = е.style.cssText:
16.3.1. Создание анимационных эффектов средствами CSS
Одной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода
setTimeout
или setlnterval
(раздел 14.1), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента. Пример 16.3 демонстрирует две такие функции, shake
и fadeOut.
Функция shake
перемещает, или «встряхивает» (shakes), элемент из стороны в сторону. Ее можно использовать, например, для привлечения внимания пользователя в случае ввода некорректных данных. Функция fadeOut
уменьшает непрозрачность элемента в течение указанного периода времени (по умолчанию 500 миллисекунд), вызывая эффект его растворения до полного исчезновения. Пример 16.3. Воспроизведение анимационных эффектов средствами CSS
// Делает элемент е относительно позиционируемым и перемещает его влево и вправо.
// Первым аргументом может быть объект элемента или значение атрибута id требуемого
// элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом е
// в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет
// величину смещения элемента е. По умолчанию принимает значение 5 пикселов.
// Четвертый аргумент определяет, как долго должен воспроизводиться эффект.
// По умолчанию эффект длится 500 мсек,
function shake(e, oncomplete, distance, time) {
// Обработка аргументов
if (typeof e === "string") e = document.getElementByld(e);
if (!time) time = 500;
if (!distance) distance = 5;
var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e
e.style.position = "relative"; // Сделать относит, позиционируемым
var start = (new Date).getTime; // Запомнить момент начала анимации ;
animate // Запустить анимацию
// Эта функция проверяет прошедшее время и изменяет координаты е.
// Если анимацию пора завершать, восстанавливает первоначальное состояние
// элемента е. Иначе изменяет координаты е и планирует следующий свой вызов,
function animate {
var now = (new Date).getTime; // Получить текущее время
var elapsed = now-start; // Сколько прошло времени с начала?
var fraction = elapsed/time; // Доля от требуемого времени?
if (fraction < 1) { // Если рано завершать анимацию
// Вычислить координату х элемента е как функцию от доли общего
// времени анимации. Здесь используется синусоидальная функция,
// а доля общего времени воспроизведения умножается на 4pi,
// поэтому перемещение взад и вперед выполняется дважды,
var x = distance * Math.sin(fraction*4*Math.PI);
e.style.left = x + "px";
// Попробовать вызвать себя через 25 мсек или в конце запланированного
// отрезка общего времени воспроизведения. Мы стремимся сделать