Question

我有一个生成100个元素的脚本并将它们附加到网站上。我正在使用jquery让元素移动到左侧或右侧，但我想知道是否会有某种算法来创建这些元素的交叉或圆圈。

所以你有100个小盒子，算法将它们移动并形成一个圆形或其他简单的符号。

我做了一些研究，但找不到可用的东西。

Answer 1

注意：这是一个超级hacky，快速整合的解决方案，有一些明显的缺陷，但我相信你可以自己解决这些问题：

这就是我可能做的事情（嗯，有点干净，但可能会沿着这些方向）：

$(function(){
    // generate the boxes
    for(var n = 0; n < 100; ++n) {
        $("<div/>",
            {
                id: n,
                style: "width: 20px;\
                    height: 20px;\
                    background-color: red;\
                    position: absolute;",
            }
        ).appendTo("#container");
    }

    var mid = {
        x: 250,
        y: 250
    };
    var w = 300;

    function circle() {
        for(var n = 0; n < 100; ++n) {
            $("#"+n).css("top", (mid.y + (Math.sin(Math.PI/((n+1)/100)) * w/2)));
            $("#"+n).css("left", (mid.x + (Math.cos(Math.PI/((n+1)/100)) * w/2)));
        }
    }

    function square() {
        // top
        var n = 0;
        for(; n < 25; ++n) {
            $("#"+n).css("top", mid.y - 150);
            $("#"+n).css("left", w * (n/25) + mid.x / 2);
        }
        // right
        for(; n < 50; ++n) {
            $("#"+n).css("top", (w * ((n-25)/25)) + mid.y/2);
            $("#"+n).css("left", mid.x + w/2);
        }
        // bottom
        for(; n < 75; ++n) {
            $("#"+n).css("top", mid.y + 300/2);
            $("#"+n).css("left", w * ((n-50)/25) + mid.x / 2);
        }
        // left
        for(; n < 100; ++n) {
            $("#"+n).css("top", (w * ((n-75)/25)) + mid.y/2);
            $("#"+n).css("left", mid.x - w/2);
        }
    }

    var fns = [circle,
               square];

    var idx = 0;
    setInterval(function() {
        fns[idx]();
        if(++idx >= fns.length) idx = 0;
    }.bind(this), 1000);
});

http://jsfiddle.net/bBEau/1/

用于从元素创建形状的算法

1 个答案: