jquery - 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/