随机圈与jQuery

Question

我没有设法找到一个允许创建这样的随机圆圈的jQuery插件：

你能帮我吗？

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
}

.circle .blue {
    background-color: #00c0f1;
}

.circle .green {
    background-color: #add036;
}

.circle .red {
    background-color: #ec2426;
}

.circle .yellow {
    background-color: #ffc116;
}

Answer 1

只需以编程方式创建新的div（例如使用$("<div />")）并随机分配宽度，高度和位置属性。例如，要创建一个圆圈，我可能会这样做：

var newCircle = $("<div />")
var d = Math.floor(Math.random() * maxDiam);
newCircle.addClass("circle");

newCircle.css({
    width: d,
    height: d,
    left: Math.random() * Math.max($("#container").width() - d, 0),
    top: Math.random() * Math.max($("#container").height - d, 0),
    backgroundColor: getRandomColor()
});
$("#container").append(newCircle);

您可以选择真正的随机颜色（例如使用此解决方案：Random circles with jQuery），或者只选择您选择的颜色：

function getRandomColor() {
    var colours = ["#00c0f1", "#add036", "#ec2426", "#ffc116"];
    return colours[Math.floor(Math.random() * 4)]
}

以下是一个完整的示例：http://jsfiddle.net/hephistocles/b63ja0h3/3/