Зодиакальный круг на Javascript + jQuery

Все началось с одной маленькой идеи. Впрочем как всегда.

Что получилось:

Как это сделать?

Для начала, хочу сразу предупредить, что для реализации подобных вещей не помешают базовые знания тригонометрии.

 

Вообще, что такое зодиакальный круг horo73? Это просто сетка ссылок:

 

Если отключить в браузере JavaScript, то вместо круга мы увидим именно такую разметку. Для того, чтобы оживить эту сетку, и превратить в кольцо, нужно сообщить каждой ссылке определенные координаты относительно блока-монитора.

 

Итак, у нас есть 12 элементов, которые мы должны равномерно распределить на окружности (360 o), т.е. получается 12 секторов с углами в 30o.

 

Для вычисления y используем sin угла, x - cos угла. Соответственно, сперва нужно перевести градусы в радианы, это делается элементарно по формуле:

RAD = DEG * (PI / 180) 
RAD - угол в радианах, 
DEG - угол в градусах

Пишем функцию конвертер:

 

function toRad(deg) {
    return deg * (Math.PI / 180);
}

 

Далее нужно определить центр координат и смещение блока-монитора:

 

// root - элемент-контейнер в котором будет выстраиваться круг
//смещение
x = root.position().left,
y = root.position().top;
//центр координат
// центр окружности
var cx = Math.round((root[0].offsetWidth + x) / 2),
    cy = Math.round((root[0].offsetHeight + y) / 2);

 

Смещение нужно, только в том случае, если позиционирование root не является относительным (position: relative), т.к. иначе все элементы внутри и так будут позиционироваться относительно родительского элемента, а не страницы.

 

В принципе, фундамент готов - осталось только дописать вычисление позиции каждого отдельного элемента:

 

$elem.animate({
    left : toLeft, 
    top : toTop,
    opacity : 1
},options.animationSpeed);

iter - индекс обрабатываемого элемента, с помощью которого делается угловой сдвиг,

radius - радиус окружности заданный в опциях виджета,

cx - центр оси координат Ox.

Таким образом мы получили координату x. Точно также определяется y:

 

// ордината
toTop = Math.round(cy + (options.radius * Math.sin(slideAngle * (iter + angleOffset))));

 

После этого остается только применить полученные координаты к элементу страницы:

 

$elem.animate({
    left : toLeft, 
    top : toTop,
    opacity : 1
},options.animationSpeed);

 

Элемент плавно переместиться на указанные координаты.