Как сделать движение HTML-объекта на Javascript - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Как сделать движение HTML-объекта на Javascript


Как вы думаете, что такое движение объекта? Ответ на этот вопрос также прост, как и его реализация в JS. Так вот, движение объекта — это изменение его координат (позиции) в определенный промежуток времени, по определенному закону движения.
В основе движения, или анимации в Javascript, лежит функция setInterval. Благодаря ей, мы можем создать таймер с необходимым кодом, который будет выполняться в заданный промежуток времени. Итак, что же нам нужно в итоге?
Сперва, необходимо сделать так, чтобы позиционирование объекта не влияло на остальные HTML-элементы на странице. Для этого, через CSS, зададим ему свойство position:absolute и укажем начальные координаты. В дальнейшем, весь скрипт сводиться к получению значений текущих координат и изменению их в CSS, учитывая закон движения и скорость (шаг в пикселях, за единицу времени).

Для нашего будущего скрипта мы сделаем также вот что еще:

  • возможность изменения скорости движения в любое время (для этого, параметр отвечающий за скорость, мы создадим не внутри функции, а как свойство объекта window)

  • прямолинейное движение по X и Y осям

  • при достижении границ окна браузера, направление движения по каждой из оси (X и Y), будет меняться на противоположное

  • возможность остановки движения в любое время (clearInterval)


В итоге получился вот такой скрипт:

<script type="text/javascript">
// начальная скорость движения
window.rocketSpeed = 3;

function rocketLauncher( obj, rocket )
{
rocket = (typeof rocket == 'object') ? rocket : document.getElementById( rocket );
rocket.params = {
direction: { 'x': 1, 'y': 1},
borders: {
'x': document.body.clientWidth - rocket.offsetWidth,
'y': document.body.clientHeight - rocket.offsetHeight
}
}
obj.flying = !obj.flying ? true : false;
obj.default_value = ! obj.default_value ? obj.value : obj.default_value ;

if( obj.flying )
{
// устанавливаем первоначальные значения позиции объекта
if( !rocket.style.left ) rocket.style.left = rocket.offsetLeft + 'px';
if( !rocket.style.top ) rocket.style.top = rocket.offsetTop + 'px';

obj.rocket = setInterval(function()
{
// смещение положение объекта
posX = parseInt( rocket.style.left ) + rocketSpeed * rocket.params.direction.x;
posY = parseInt( rocket.style.top ) + rocketSpeed * rocket.params.direction.y;
rocket.style.left = posX + 'px';
rocket.style.top = posY + 'px';

// изменение направления движения при достижении границ окна браузера
if( posX < 0 || posX > rocket.params.borders.x ) rocket.params.direction.x *= -1;
if( posY < 0 || posY > rocket.params.borders.y ) rocket.params.direction.y *= -1;
}, 10);

obj.value = 'Остановить';
}
else {
// остановка движения
clearInterval( obj.rocket );
obj.value = obj.default_value;
}
}
</script>

<input type="button" value="Запустить «ракету»!" onclick="rocketLauncher( this, 'rocket')" />
<input type="button" style="color:#CC3300" value="Медленнее (-1)" onclick="window.rocketSpeed--" />
<input type="button" style="color:#339933" value="Быстрее (+1)" onclick="window.rocketSpeed++" />
<span id="rocket">&bull;</span>
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 5609 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]