javascript - 使用 CSS 的银河结构

Question

我想使用 JSPlumb 构建节点连接器应用程序。

现在的想法是有一个中央 div 元素可以连接到所有

div元素沿中心div的圆周以特定半径分布

附上相同的屏幕截图，这可以直接使用 CSS

很抱歉，如果我的问题让任何人感到困惑，但我决定尽可能有效地解释它。我将非常感谢有人编辑它以更好地理解观点

问候

Answer 1

弄乱这个。

http://jsfiddle.net/A7pY2/2/

HTML:

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

#container {
     position: absolute;
    top: 300px;
    left: 300px;
}
#container div {
    position: absolute;
    background-color: #eee;
    width: 50px;
    height: 50px;
}

JavaScript:

startCar();

function startCar() {
    var items = document.getElementById("container").getElementsByTagName("div").length;
    var angles = new Array(items);
    var rx = 200;
    var ry = 100;

    initCar();



    function initCar() {
        var content = document.getElementById("container");
        var divs = content.getElementsByTagName("div");
        var xpos, ypos;
        for(var i = 0; i < items; i++) {
            angles[i] = ((Math.PI * 2) / items) * i;
            xpos = Math.cos(angles[i]) * rx;
            ypos = Math.sin(angles[i]) * ry;
            divs[i].style.left = xpos + 'px';
            divs[i].style.top = ypos + 'px';
            divs[i].style.zIndex = parseInt(ypos);
        }
    }

}