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/
精彩评论