呼叫画廊图像，间隔

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

这应该足以让你工作过的添加您想要的交互和效果的详细程度。