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);
        }
    }

}

Answer 2

好吧，我不打算学习 JSPlumb，但我可以告诉你我将如何解决它的 HTML/CSS 方面，并提供一些关于如何在 JS 中使用该布局来发挥你优势的指针。我不认为有任何实用的非复杂/愚蠢的方式来设置仅使用 CSS 的坐标，因为这里需要数学，但你可以使用 SVG 来做到这一点，这就是 JSPlumb 似乎在其演示中使用的页。

CSS：

#central_div { position:relative; overflow:visible; }
/* or absolute or fixed */

.orbit { overflow:visible; }
/* no position set for orbits so stars anchor to #central_div */

.star { position:absolute; width:20px; height:20px; }

HTML：

<div id="central_div">

    <div class="orbit" data-radius="50">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

    <div class="orbit" data-radius="100">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

</div>

注意：请记住，轨道 div 都位于中央 div 的一侧。它们只是用来组织您的恒星并以数据半径属性的形式提供易于调整的轨道钩。无需在它们上设置任何尺寸或移动它们。

JS：

现在您的 JS 可以遍历轨道，获取数据半径并将其应用于星弧度或度数数据（可以轻松转换为其中一个）。我现在将几何留给您，因为这看起来更像是一个标记/css 问题，但让我们假设一个名为的函数setStarCoordinates接受<star dom element object>,<radius>和<radians or degrees - your choice>for 参数。

只有星星具有高度/宽度尺寸，但它们本身是绝对的，因此可以假设它们的容器都占据单个 x,y 点。除了几何形状，您还必须将星星的顶部和左侧坐标设置为 astop + (.5 * height)和 left asleft + (.5 * width)

弧度链接： http ://www.teacherschoice.com.au/maths_library/angles/angles.htm

然后是这样的循环：

var orbits = document.querySelectorAll('#central_div .orbit'),
i = orbits.length;

while(i--){
    var radius = orbits[i].getAttribute('data-radius'),
    stars = orbits.getElementsByClassName('star'),
    //or use querySelectorAll again if you're supporting IE8
    j = stars.length;

    while(j--){
        var thisStar = stars[j],
        radian == thisStar.getAttribute('data-radian');
        setStarCoords(thisStar, radius, radian);
    }
}

Answer 3

最简单的方法是使用带有虚线背景图像的 DIV。

然后有更多的 DIV、A 标签或任何绝对位于此之上的东西。

<div id="my-background-div">
    <a href="#">Node #1</a>
    <a href="#">Node #2</a>
    <a href="#">Node #3</a>
    <a href="#">Node #4</a>
</div>

...等等。

不是编程解决方案，但我认为仅使用纯 CSS 是不可能的，所以我上面的解决方案对于静态页面来说是可以的。