Показать случайные изображения в случайных местах jquery - PullRequest
Новая
       2

Показать случайные изображения в случайных местах jquery

0 голосов
/ 19 мая 2011

Я пытаюсь отобразить случайные изображения в случайных областях внутри div. То, что я ищу, близко к этому сайту . Они отображают изображения и поля, которые появляются и исчезают.

Я искал плагин jQuery для чего-то подобного, но я не могу его найти. Ребята, у вас есть идеи по этому поводу?

Ответы [ 4 ]

0 голосов
/ 19 мая 2011

Если вы действительно хотите эффект, подобный связанному сайту, то вам не нужно добавлять случайные изображения в случайных позициях. Позиции жестко закодированы, и каждый случайным образом выбирает из подмножества изображений соответствующего размера. 

var tS;
var tL;
var imgSmall = ["1.jpg", "2.png", "3.png", "10.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
var smallLen = imgSmall.length;
var imgLarge = ["A1.jpg", "A2.jpg", "A3.jpg", "A10.jpg", "A4.bmp", "A5.jpg", "A6.jpg", "A7.jpg", "A8.jpg", "A9.jpg"];
var largeLen = imgLarge.length;

function showLarge() {
    var idxLarge = Math.floor(Math.random() * largeLen);
    $("#large").fadeToggle(300, function() { $("#large").attr("src", "img/" + imgLarge[idxLarge]) }).fadeToggle(300);
    tL = setTimeout("showLarge()", 2000);
}

function showSmall() {
    var idxSmall = Math.floor(Math.random() * smallLen);
    $("#small").fadeToggle(300, function() { $("#small").attr("src", "img/" + imgSmall[idxSmall]) }).fadeToggle(300);
    tS = setTimeout("showSmall()", 1700);
}

$(document).ready(function() {
    showLarge();
    showSmall();
});

В HTML вам просто нужна пара позиций для изображений. 

<img src="img/1.jpg" id="small" style="position:absolute; top:50px; left:100px;" />

<img src="img/A8.jpg" id="large" style="position:absolute; top:100px; left:400px;" />

Преимущество этого подхода состоит в том, что вы можете создать макет точно так, как вам нравится, с цветными элементами div и всем. Вы также можете использовать вариант этого кода для анимации цветов цветных элементов div.

0 голосов
/ 19 мая 2011

Дайте каждому div отдельное имя класса с числовым обозначением.Что-то вроде «random1», «random2» и т. Д., Затем стиль, цвет и абсолютное позиционирование элементов div с помощью css.

Затем используйте jquery, чтобы перебрать элементы div и задать им класс в случайном порядке.

$(document).ready(function() {
    var length = $("div").length;
    $('div').each(function(index) {
        $(this).addClass('random'+(Math.floor(Math.random()*length) + 1));
    });
});
0 голосов
/ 19 мая 2011

Извините за длину, она выросла, когда я больше думал о намерениях ОП, а не о тексте его вопроса. Что здесь нужно, так это фабрика, а не случайный список. Обычно, я бы сделал это классом, но я оставил его более процедурным для разборчивости теми, кто не склонен к этому.

Кроме того, я бы заранее определил «точки приземления» для изображений, потому что построение их алгоритмически просто требует плохого опыта и проблем ... и, следовательно, мое предложение: 

$(document).ready(function(){
  function rndsort(a,b)
  {
     return (Math.random() > 0.5) ? a : b;
  }
  function getImage()
  {
      if (imgs.length > 0)
      {
         return imgs.shift();
      }
  }
  function switchImage(container)
  {
     var newImage = getImage();
     if (newImage)
     {
        if ($(container).data('img'))
        {
           imgs.push($(container.data('img'));
        }
        $(container).html('<img src="'+getImage()+'" />');
     }
  }

  function doRandom()
  {
     switchImage($('.places').get(Math.floor(Math.random() * $('.places'.length)));
  }

  var imgs = ['image1.jpg','image2.jpg', etc... ];

  imgs.sort(rndsort);

  $('.places').each(function(idx, el){
    switchImage(el);
  });
  // add a timer and start calling 'doRandom()';
});
0 голосов
/ 19 мая 2011

Следующая функция добавит изображение в селектор container и вернет его идентификатор. 

function rnd(max) { return Math.floor(Math.random()*(max+1)) }

function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) {
    var id = "newimage" + rnd(1000000);
    $(container).append(
        "<img id='" + id + "' src='" + imgsrc + 
        "' style='display:block; float:left; position:absolute;" + 
        "left:" + rnd(maxwidth - imgwidth) + "px;" +
        "top:"  + rnd(maxheight - imgheight) + "px'>");
    $('#' + id).fadeIn();
    return id;
}

Допустим, у вас есть 10 изображений с именами image0.jpg до image10.jpg, и они имеют одинаковую ширину/height.

Затем вы можете вызывать эту функцию каждые 10 секунд следующим образом: 

setInterval(function() {
    showImage("#container", 300, 300, "image" + rnd(10) + ".jpg", 100, 100);
}, 10000);

Контейнер должен быть таким: 

<div id='container' style='width:300px; height:300px; position:relative'>

Я сделал образец дляработайте с placekitten.com , где при изменении размеров создается другое изображение.Это здесь: http://jsfiddle.net/G5Xrz/

...