Блог

Главная - Вопросы по программированию - Сделать так, чтобы изображения появлялись случайным образом в div каждые несколько секунд… Как?

Сделать так, чтобы изображения появлялись случайным образом в div каждые несколько секунд… Как?

#javascript #html #image

#javascript #HTML #изображение

Вопрос:

Простой вопрос, у меня правильный 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();

Комментарии:

1. Вам нужно задать конкретные вопросы, показать код, который вы пробовали. Общий вопрос: как мне это сделать, этот сайт работает не так, пожалуйста, отредактируйте свой вопрос

2. @mcgrailm Что вы имеете в виду под конкретным? Я не могу объяснить это лучше, я просто хочу создать тег <img> с fooi.png в нем, где-нибудь внутри этого div.

3. покажите, что вы пытались или пытаетесь сделать, и где у вас возникли проблемы. Хорошей отправной точкой было бы использование таймера

4. @mcgrailm Я отредактировал свой пост с тем, что у меня уже есть. Теперь мне нужно создать тег img в случайном месте div… Как?

Ответ №1:

Сначала напишите какой-нибудь 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();

Ответ №2:

Используйте 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=128amp;d=identiconamp;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/

Комментарии:

1. Хорошо, это также работает для создания таймаута, но я все еще хочу получить свое изображение в случайном месте внутри div !?! И этот ответ на самом деле не помогает…

2. @Thew — Да, я понял это, как только решил сделать демо. Смотрите редактирование и ссылку. Обратите внимание, в демо я использовал свой собственный gravatar и 15 seconds.