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

@Илья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

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Опции темы