Передвижение элемента на JS
Здравствуйте у меня есть вот такой код на html и такие стили к нему:
CSS:
У меня этот кружочек(child-block) в блоке c помощью анимации крутится, мне нужно с помощью рекурсии увеличивать свойство left, чтобы кружочек двигался с начала блока и налево, когда доходил конца блока, он останавливался, но чтобы анимация всегда работала
По дате
По рейтингу
Зачем для "бегующих кружков" рекурсия? Там всё устроено попроще...
Остановка передвижение - в if (left > 288) вместо 288 пишем координаты конца блока в котором бегает наш кружок. Их конечно лучше не высчитывать вручную, а получить программно
123456789101112131415161718192021222324252627282930313233
<html>
<head>
<style>
#d {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
#innerD {
width: 300px;
height: 20px;
border-style: solid;
border-color: black;
background-color: yellow;
}
</style>
</head>
<body>
<div id='innerD'>
<div id='d'></div>
</div>
<script>
const move_ball = () => {
d.style.position = 'absolute';
left = d.offsetLeft;
d.style.left = left + 1;
if (left > 288) {clearInterval(moveID)}
}
let moveID = setInterval(move_ball, 10);
</script>
</body>
</html> 