- •Анимация в JavaScript Строка состояния и эффект «бегущей» строки Строка «бежит» слева направо
- •Строка «бежит» справа налево
- •Практическое задание №1
- •Введение в объектную модель документа (dom) Обращение к элементу
- •Смена оформления элемента
- •Мигание
- •Математические функции и перемещение элементов Математические функции
- •Перемещение элементов
- •Полярная система координат
- •Основы перемещения элементов
- •Движение по прямой
- •Движение по окружности
- •Движение исключительно в пределах окна
- •Практическое задание №2
- •Слайд-шоу
- •Смена картинок
- •Слайд-шоу
- •Практическое задание №3
Анимация в JavaScript Строка состояния и эффект «бегущей» строки Строка «бежит» слева направо
Создать бегущую строку совсем не сложно. Ведь если мы будем дописывать слева от строки пробелы, то визуально строка начнёт сдвигаться вправо. Итак, создадим небольшую функцию и запустим её через небольшой интервал.
status = 'Текст строки состояния'; // Записываем текст в строку состояния.
function move2Left() { // Объявляем функцию.
status = ' ' + status; // Сдвигаем текст вправо.
}
setInterval(move2Left, 100); // Запускаем интервал.
Вы можете посмотреть, как же выполнится приведённый код.
Что, опять не видно строки состояния? Пожалуйста, открывайте уроки по ECMAScript в отдельном окне2.
Но что происходит? Наша строка «убегает» за пределы видимости! Не порядок!
Итак, нам нужно остановить перемещение строки когда её размер превосходит «допустимые нормы». Для этого сохраним наш интервал в переменной, и после отменим его методом «clearInteval(кодТаймера)».
А в функции будем проверять, не превышает ли длина строки (свойство «'строка'.length») 50 символов («if (status.length > 50)»). Если условие выполнится, прервём интервал. Да, перед тем, как смотреть на выполнение последующего кода, обновите страницу.
status = 'Текст строки состояния'; // Записываем текст в строку состояния.
function move2Left() { // Объявляем функцию.
status = ' ' + status; // Сдвигаем текст вправо.
if (status.length > 50) // Проверяем длину строки.
clearInterval(statusBarTimer); // Отменяем интервал.
}
var statusBarTimer = setInterval(move2Left, 100); // Сохраняем интервал в переменной.
Вы можете посмотреть, как же выполнится приведённый код.
Итак, у нас появилась «бегущая» строка. Правда, бегает она на «привязи» в 50 символов.
Строка «бежит» справа налево
Ну что, для движения слева направо мы дописывали пробелы. Для движения в противоположную сторону, естественно, следует их убирать. Это не на много сложнее.
Давайте посмотрим на «сдвинутую» строку. Она начинается с пробелов. Если мы один из них уберём, строка сдвинется влево.
Метод «'строка'.indexOf('подстрока')» позволяет узнать, с какой позиции искомая подстрока встречается в указанной строке. Он возвращает номер символа, с которого начинается первое вхождение, если оно есть, или -1, если подстрока не встречается ни разу. Да, как всегда, считаем от нуля.
Метод «'строка'.substring(позиция)» возвращает подстроку, начинающуюся с указанной позиции, и до конца строки. Другими словами, этот метод позволяет откинуть первые символы строки.
Сведя воедино предыдущие абзацы (вернее, мысли, высказанные в них), получим вот такой код:
status = ' Текст строки состояния'; // Записываем текст в строку состояния.
function move2Right() { // Объявляем функцию.
if (status.indexOf(' ') == 0) // Нулевой символ — пробел?.
status = status.substring(1); // Откидываем нулевой символ.
else
clearInterval(statusBarTimer); // Отменяем интервал.
}
var statusBarTimer = setInterval(move2Right, 100); // Сохраняем интервал в переменной.
Вы можете посмотреть, как же выполнится приведённый код.
Вот и всё. Мы реализовали движение справа налево.