Question

Using the code submitted here，我怎么能做一个类似的事情，但有几个不同的图像，而不是一个图像重复x次。

$(document).ready(function(){
var ticket="<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>";
var numTickets=10;
for(var x=1;x<=numTickets;x++){
    $(ticket).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".ticket").each(function(i){
    var posx = Math.round(Math.random() * ww)-20;
    var posy = Math.round(Math.random() * wh)-20;
    $(this).css("top", posy + "px").css("left", posx + "px")
});
});

我编辑了2pha的代码以摆脱旋转，因为这就是我所追求的，但我不知道我会编辑它以生成一组特定的图像。

这是an edited Fiddle to show what I'm talking about

非常感谢：）

Answer 1

这是你需要的吗？（为了节省时间我只换了一张图片） https://jsfiddle.net/9wuu4fph/

基本上，您可以构造一个包含7个不同图像的数组，然后随机选择一个循环迭代，然后从数组中删除（因此不会再次拾取）。

数组（最好只有图片网址，在循环中创建dom元素）：

var tickets = [
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddies272.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
    "<div class='ticket'><img src='http://samuelbar.net/images/baddie.png'></div>",
];

循环：

// We need to retain original length, to run loop X times
var ticketsOriginalLength = tickets.length;

for (var x = 0; x < ticketsOriginalLength; x++) {
    // Use updated length, or else index out of bounds errors
    var rand = getRandomInt(0, tickets.length - 1);
    $(tickets[rand]).appendTo("body");
    // Remove image from array
    tickets.splice(rand, 1);
}

'随机'功能：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

创建特定图像并将它们放在div中的随机位置

1 个答案: