Задать вопрос
@silasibiri
javascript

Как осуществить движение объекта в html с помощью JavaScript?

Я хочу осуществить плавное движение объекта в html. Я уже написал кое-какой код, который двигает резко, просто изменяет положение
тут код
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
 
<script type="text/javascript">
    function move () {
x = document.getElementById("id1").offsetLeft;
xn = x + 50;
document.getElementById("id1").style.left = xn+"px"
    }
</script>
 
 
<input type="button" value="Replace content" onclick="move()">
<img id='id1' src="res\img.png" style="position: relative;">
 
 
</body>
</html>

Но мне этого недостаточно, подскажите пожалуйста как сделать плавное перемещение.
  • Вопрос задан
  • 234 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Ну Вы перемещаете на 50 пикселей, тут как не крути - плавно не будет.

Есть 2 варианта:
Перемещать через css transition. Тогда нужно указать для этого блока transition: left 0.3s linear
Либо понизить шаг перемещения, а так же воспользоваться функцией requestAnimationFrame

P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Технический специалист / интегратор / разработчик (Javascript, PHP, WordPress)
HRScan
от 1 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Развернуть проект Botpress v12 на VPS
09 янв. 2025, в 01:34
2000 руб./за проект
Сделать анимацию для артикуляционных и звуковых упражнений
08 янв. 2025, в 23:50
500 руб./в час
Создать программу в Qt с которая читает файл Json с фильтрацией
08 янв. 2025, в 23:14
500 руб./за проект
Ещё заказы