powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Расположить дивы по кругу
4 сообщений из 4, страница 1 из 1
Расположить дивы по кругу
    #39713553
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Здравствуйте.
На странице имеется несколько дивов. Их надо расположить вокруг одного центра.
Нашел такое решение:
HTML:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<div id="wrap">
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
<div>раздватри</div>
</div>



CSS:

Код: css
1.
2.
#wrap {position: absolute; }
#wrap div {width: 30px; height: 30px; background:#333; position: absolute; }



JS:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
var num = 20; // Число дивов
var wrap = 400; // Размер "холста" для расположения дивов
var radius = 200; // Радиус нашего круга

$(document).ready(function() {
  for (i=0;i<num; i++){
        var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждого дива в радианах
        var left = wrap + radius * Math.sin(f) + 'px';
        var top = wrap + radius * Math.cos(f) + 'px';
        $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждому диву
  }
});




Вроде все работает, но есть несколько проблем.
1. Если число дивов четное, то они должны располагаться по 2 в строку, а этот код в первой и последней строке делает по одному диву.
2. Круг получается по левому краю дивов, мне же нужно, чтобы круг был для дивов, находящихся слева - по правому краю, для дивов, находящихся справа - по левому краю
3. Это наверное не в этот форум, но все-таки напишу здесь. Текст сейчас я указал везде одинаковый. Но на самом деле он разный. И мне надо, чтобы ширина дива была такая, чтобы видно было весь текст в одну строку. width: auto; не помогает

На рисунке то, что примерно должно получиться.
Подскажите, как мне решить возникшие проблемы, или как сделать то, что на приложенном рисунке
...
Рейтинг: 0 / 0
Расположить дивы по кругу
    #39713709
stanilar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Если бы такое пришлось делать мне, то сейчас я бы выбирал между D3.js & svg. Причем, зная себя, предпочел бы первый вариант.
...
Рейтинг: 0 / 0
Расположить дивы по кругу
    #39713781
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
stanilarЕсли бы такое пришлось делать мне, то сейчас я бы выбирал между D3.js & svg. Причем, зная себя, предпочел бы первый вариант.
Не понял чего вы написали. Это - вообще не при делах.
А топикстартеру нужно изучать школьную математику и, конечно, DOM.
...
Рейтинг: 0 / 0
Расположить дивы по кругу
    #39713795
stanilar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSerge

Если посмотреть на картинку, то все при делах. SVG(а D3 тоже на нем) можно кодить как html. Не при делах, скорее, работа с дивами, потому как задача выходит за границы темы разметки страницы.

P/S/ Хотя можно и дивами, да. Тут кто-то картинку на стилях постил.
...
Рейтинг: 0 / 0
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Расположить дивы по кругу
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]