Почему только два кружочка двигаются?

@Илья2002 · Регистрация: 16.03.2017

Студворк — интернет-сервис помощи студентам

Я создал 4 кружочка на странице, которые должны двигаться против часовой стрелки заменяя друг друга. Но происходит что-то непонятное. Они телепортируются и не против часовой стрелки идут да и не по часовой. И почему-то только у двух кружочков есть анимация передвижения. Все остальные мгновенно перемещаются. Как сделать,чтобы всё работало?

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
    <p class = "circle c1"></p>
    <p class = "circle c2"></p>
    <p class = "circle c3"></p>
    <p class = "circle c4"></p>
</body>
<head> <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script src="js.js"></script>
</head>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.circle {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100px; 
}
    .c1 {
        background-color: blue;
    }
    .c2 {
        background-color: darkorchid;
    }
    .c3 {
        background-color: forestgreen;
    }
    .c4 {
        background-color: aqua;
    }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function c(){
var cr = [[48,47],[51,47],[48,51],[51,51]],
v = Array.from(document.getElementsByClassName("circle")),
html = document.documentElement;
console.log(v);
function s() {
    w = html.clientWidth;
    h = html.clientHeight;
    cr[4] = cr[3];
    cr[5] = cr[0];
    cr[6] = cr[1];
    cr[7] = cr[2];
    cr = cr.slice(4,);
    x = -1;
    v.forEach (function (i,i1, v) {
        x += 1;
        l = w / 100 * cr[x][0];
        t = h / 100 * cr[x][1];
        i.style.marginLeft = l;
        i.style.marginTop = t;
        i.style.transition = "margin-left 250ms";
        i.style.transition = "margin-top 250ms";
        console.log(i);
    });}
setInterval(s, 1000);
}
document.addEventListener("DOMContentLoaded", c);

https://yadi.sk/d/ynxyN82b3P8Eb9 Все файлы тут.

@TinSemenova · 27.10.2017, 16:28

Двигаются по часовой стрелке!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function c(){
var cr = [[48,47],[48,51],[51,51],[51,47]],
v = Array.from(document.getElementsByClassName("circle")),
html = document.documentElement;
    w = html.clientWidth;
    h = html.clientHeight;
    
function s() {
for(m=0;m<3;m++){
        per=cr[m];
        cr[m]=cr[m+1];
        cr[m+1]=per;        
}
 
    v.forEach (function (i, k, v) {
 
        l = w / 100 * cr[k][0];
        t = h / 100 * cr[k][1];
 
        i.style.marginLeft = l;
        i.style.marginTop = t;
 
        i.style.transition = "all 250ms";
 
});}
setInterval(s, 1000);
}
document.addEventListener("DOMContentLoaded", c);

@TinSemenova · 27.10.2017, 16:34

Здравствуйте!
Прикрепила ещё отредактированный архив.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .