Движение исключительно в пределах окна
При движении по прямой элемент уходит за пределы окна. Если мы будем проверять соотношение между размерами элемента, его координатами и размерами окна, то сможем предусмотреть такое развитие событий.
У любого элемента есть свойства offsetWidth и offsetHeight, которые хранят ширину и высоту элемента в пикселах соответственно, и свойства offsetTop и offsetLeft, в которых хранится расстояние в пикселах от верхнего и левого края родительского элемента соответственно. У элементов с «overflow: scroll;» и «overflow: auto;» есть свойства clientWidth и clientHeight, определяющие видимую область элемента без полос прокрутки (то есть, для ‹body› они определяют ширину и высоту рабочей области окна соответственно).
Устроим проверку.
<body id="body">
<span id="move-me" style="position: absolute; border: 1px dashed black;">Я двигаюсь!</span>
<script type="text/javascript">
var phi = Math.PI / 6; // Устанавливаем угол в -30°.
var rho = 0; // Начальное значение радиус-вектора ρ.
var rhoOffset = 0.5; // Приращение радиус-вектора ρ.
function moveByLine() { // Объявляем функцию.
document.getElementById('move-me').style.left = rho * Math.cos(phi) + 'px'; // Вычисляем координату по оси ординат.
document.getElementById('move-me').style.top = rho * Math.sin(phi) + 'px'; // Вычисляем координату по оси абцисс.
rho += rhoOffset; // Приращиваем радиус-вектор ρ.
// Проверяем, не выходит ли элемент за пределы ‹body›.
if ((document.getElementById('move-me').offsetLeft + document.getElementById('move-me').offsetWidth >= document.getElementById('body').clientWidth) ||
(document.getElementById('move-me').offsetTop + document.getElementById('move-me').offsetHeight >= document.getElementById('body').clientHeight))
clearInterval(moveInterval); // Отменим интервал.
}
var moveInterval = setInterval(moveByLine, 20); // Сохраняем интервал в переменной.
</script>
</body>
Вы можете просмотреть, как же будет выглядеть приведённый код в обозревателе.
Практическое задание №2
Реализуйте эффект «отскакивающего мячика». То есть, движущийся элемент должен «отскакивать» от границ ‹body›.
Замечания. При «отскакивании» угол меняется на π-α, что проиллюстрировано рисунком справа. Удобно реализовать новую функцию движения путём смещения полюса в точку удара и пересчёта φ по формуле выше.
Слайд-шоу
Для слайд-шоу нам необходимо время от времени сменять изображения.
Смена картинок
Смена картинок заключается в простой смене атрибута src, отвечающего за URI показываемого изображения.
Для получения значения атрибута используется метод «getAttribute(имяАтрибута)». Для установки атрибута используется метод «setAttribute(имяАтрибута, новоеЗначениеАтрибута)». Для удаления атрибута используется метод «removeAttribute(имяАтрибута)».
Итак, если мы будем периодически сменять атрибут src элемента ‹img /›, то получим слайд-шоу. Пути к картинкам неплохо сохранить в массиве.
<div style="text-align: center;">
<h3 style="margin-top: 0;">Слайд-шоу</h3>
<img id="slide" src="./images/15-1.jpeg" alt="Фотография: спортсмены на беговой дорожке." />
</div>
Вот как будет выглядеть приведённый код в обозревателе: