Question

您如何在具有特定延迟的随机位置上显示图像列表？像这样的东西，但有一个随机图像列表......

http://jsfiddle.net/postcolonialboy/HfLZ4/45/

function placeimage(){
    $div = $('#bgimagerandom');
    $div.css('position','absolute');
    id = 'ranimg'+Math.floor(Math.random()*55);
    left = Math.floor(Math.random()*parseInt($div.innerWidth()));
    top = Math.floor(Math.random()*parseInt($div.innerHeight()));
    $div.append('<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" alt="image" id="'+id+'" onclick="doclick(this.id);" style="display: none; position: relative;">');
    $img = $('#'+id);
    $img.css('top',left+'px');
    $img.css('left',top+'px');
    $img.show();
    setInterval(function(){placeimage();}, 10000);
}

placeimage();

Answer 1

我更新了你的小提琴：http://jsfiddle.net/HfLZ4/46/

它现在接受图像列表：

<div id="bgimagerandom">
    <img src="http://lorempixel.com/200/200/" />
    <img src="http://lorempixel.com/200/200/" />
    <img src="http://lorempixel.com/150/200/" />
    <img src="http://lorempixel.com/200/300/" />
    <img src="http://lorempixel.com/200/150/" />
</div>

然后操纵它们直到它们全部显示出来：

var $div = $('#bgimagerandom'),
    $imgs = $div.children('img'),
    Width = $div.width(),
    Height = $div.height(),
    zIndex = 1,
    loaded = 0;

Array.prototype.random = function() {
    return this[Math.round(Math.random() * (this.length - 1))];
}

function reveal(){
    console.log(loaded)

    if(loaded < $imgs.length || $imgs.filter(':not(".visible")').length == 0) {return;}

    var $img = $($imgs.filter(':not(".visible")').get().random()),
        width = $img[0].width,
        height = $img[0].height,
        left = Math.min(Math.random() * Width, Width - width),
        top = Math.min(Math.random() * Height, Height - height);

    $img.css({
        'top': top + 'px',
        'left': left + 'px',
        'zIndex': zIndex
    })
    .addClass('visible');

    zIndex += 1;

    setTimeout(function(){reveal();}, 5000);
}

$imgs
.on('load', function() {
    loaded += 1;

    reveal();
})
.each(function() {
    if(this.complete) {
        $(this).trigger('load');
    }
});

随机图像出现z-index javascript延迟

1 个答案: