"use strict"; ;(function ($) { // конвертирует градусы в радианы function toRad (deg) { return deg * (Math.PI / 180); } // виджет для расстановки элементов по кругу var DHTMLCircle = function (options) { var root = this; // опции jQuery виджета options = $.extend({ 'elementsSelector' : '> a', 'radius' : 100, 'animationSpeed' : 600, 'xOffset' : 0, 'yOffset' : 0 }, options || {}); var slides = root.find(options.elementsSelector), // позиционируемые элементы slidesCount = slides.length, x = root.position().left, y = root.position().top; // нам не нужно учитывать смещение родителя при относительном позиционировании if(root.css('position') == 'relative') x = y = 0; // вычисляем центр окружности и угол поворота var cx = Math.round((root[0].offsetWidth+x) / 2), cy = Math.round((root[0].offsetHeight+y) / 2), slideAngle = toRad(360 / slidesCount); // построение this.render = function(offset, angleOffset) { // смещение, если было передано offset = offset || 0; angleOffset = angleOffset || 0; for(var iter = 0; iter < slidesCount; iter++) { var elem = slides[iter], $elem = $(elem), // jQuery элемент для позиционирования slideWidth = parseInt($elem.width()), // ширина slideHeight = parseInt($elem.height()); // высота // вычисление координат элемента // cx - центр оХ, // r * cos() - абсцисса без смещений, // - slideWidth(ибо строится по верх.левому углу), // -offset - ручное смещение, // xOffset - изначальное смещение // абсцисса var toLeft = Math.round(cx + (options.radius * Math.cos(slideAngle*(iter+angleOffset))) - slideWidth - offset - options.xOffset); // ордината var toTop = Math.round(cy + (options.radius * Math.sin(slideAngle*(iter+angleOffset))) - slideHeight - offset - options.yOffset); $elem.animate({ left : toLeft, top : toTop, opacity : 1 },options.animationSpeed); } } this.render(); return this; } /* Пример использования: var container = $('#circle-positioned-container'); container.DHTMLCircle({ radius: container.offset().width }); */ $.fn.DHTMLCircle = DHTMLCircle; }(window.jQuery));