呼叫畫廊圖像，間隔

Question

重疊

(function makeDiv(){ 
var divsize = ((Math.random()*100) + 50).toFixed(); 
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
$newdiv = $('<div/>').css({ 
    'width':divsize+'px', 
    'height':divsize+'px', 
    'background-color': color 
}); 

var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

$newdiv.css({ 
    'position':'absolute', 
    'left':posx+'px', 
    'top':posy+'px', 
    'display':'none' 
}).appendTo('body').fadeIn(700).delay(3500).fadeOut(300, function(){ 
    $(this).remove(); 
    makeDiv(); 
}); 
})(); 

FIDDLE：http://jsfiddle.net/redler/QcUPk/8/

設計樣機：http://i.imgur.com/D4mhXPZ.jpg

我試過這個代碼，我發現擺弄，但我剛剛結束了屠殺，並打破它。在一個例子中，我的代碼每次迭代都會使對象加倍，並且它幾乎使我的PC崩潰，嘿。

我需要在這裏發生一些事情。

• 我需要至少有8個這些對象同時執行這個出現和消失的行爲，彼此重疊略微偏移（centerOffset？）。每個出現的廣場都應該位於以前仍然徘徊的圖像的前面。

• 對象不是彩色正方形，但應該是從數據庫中隨機調用的圖像（產品庫存）。

• 當您將鼠標懸停在任何圖片上時，該過程應該暫停，當您將鼠標放在上面時，該對象會到達前端，並顯示一些關於該圖片的文字。如果您點擊它，它會將您導航到項目頁面。

注：任意大小元素是好的，但我有一些更高的圖像，一些更廣泛的圖像等不知道如何處理。

Answer 1

有相當多的動畫/定時工作，以保持8個對象同時出現/消失。下一個難點是捕捉鼠標懸停在對象上以及何時「走到前面」，您可能需要jQuery 懸停意圖插件。無論如何，這裏有一些工作代碼會同時將8個隨機對象動畫到屏幕上，而當鼠標懸停一個對象時，出現/消失的動作將會停止。當你的鼠標離開對象，動畫將繼續：http://jsfiddle.net/amyamy86/Q6XKv/

的主要依據是這個（見全碼小提琴）：

// Adds the box and animates in/out 
var addBox = function() { 
    var makeBox = function() { 
     var divsize = ((Math.random() * 100) + 50).toFixed(); 
     var color = '#' + Math.round(0xffffff * Math.random()).toString(16); 
     var newBox = $('<div class="box" id="box' + boxIds + '"/>').css({ 
      'width': divsize + 'px', 
       'height': divsize + 'px', 
       'background-color': color 
     }); 
     return newBox; 
    }; 
    var newBox = makeBox(); 
    var boxSize = newBox.width(); 
    var posx = (Math.random() * ($(document).width() - boxSize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - boxSize)).toFixed(); 
    newBox.css({ 
     'position': 'absolute', 
      'left': posx + 'px', 
      'top': posy + 'px', 
      'display': 'none' 
    }).appendTo('body').fadeIn(ANIMATE_SPEED/2, function() { 
     if (timer !== null) { 
      $(this) 
      .delay(ANIMATE_SPEED * MAX_BOXES) 
      .fadeTo(1, 1, function() { 
       if (timer !== null) { 
        var id = $(this).attr('id'); 
        removeBox(id); 
       } 
      }); 
     } 
    }); 
    boxIdList.push(boxIds++); 
    lastBox = newBox; 
    numBoxes++; 
    return newBox; 
}; 


// Add the boxes in at interval animateSpeed, if there's too many then don't add 
var animateBox = function() { 
    if (numBoxes < MAX_BOXES) { 
     addBox(); 
    } else { 
     removeBox(boxIdList[0]); 
    } 
    timer = setTimeout(animateBox, ANIMATE_SPEED); // re-set timer for the next interval 
}; 

// starts everything off 
var start = function() { 
    timer = setTimeout(animateBox, ANIMATE_SPEED); 
}; 

這應該足以讓你工作過的添加您想要的交互和效果的詳細程度。