开发者

Make images appear randomly in a div every few seconds... How?

Simple question, i have this DIV right, 400 * 250 px. And i have this image, fooi.png. How can i make fooi.png randomly appear somewhere inside that div (and it doesn't remove the other images that already have been appeared) every 2 seconds?

Edit:

What i've got:

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

        placeimage();


Write some css first

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

and javascript some how like this below

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();


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜