Question

简单的问题，我有这个DIV正确，400 * 250像素。我有这个图像，fooi.png。我如何让fooi.png随机出现在该div内的某个地方（并且它不会每2秒删除已经出现过的其他图像）？

编辑：

我得到了什么：

        function placeimage(){
            $('#div').append('<img src="fooi.png" alt="image" id="'. Math.floor(Math.random()*55) .'" onclick="doclick(this.id);">');
            setTimeout(placeimage, 2000);
        }

        placeimage();

Answer 1

使用setInterval()：

function placeimage(){
    $div = $('#div');
    $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();}, 15000);
}

placeimage();

http://jsfiddle.net/userdude/HfLZ4/

Answer 2

先写一些css

#div img {position: relative; float: left }

和javascript一些如下所示

function placeimage(){
        var t = $('<img src="fooi.png" alt="image" id="' +  Math.floor(Math.random()*55)  + '" onclick="doclick(this.id);">');
        $('#div').append(t);
        t.css('left', Math.floor(Math.random()*(400 - t.width())));
        t.css('top', Math.floor(Math.random()*(250 - t.height())));
        setTimeout(placeimage, 2000);
    }

    placeimage();

每隔几秒让图像在div中随机出现......怎么样？

2 个答案: