javascript - 从数据库中随机调用图库图像，间隔重叠

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

我试过修改我发现的这段代码，但我最终还是把它搞砸了。在一个例子中，我让代码每次迭代都将对象加倍，这几乎让我的电脑崩溃了，呵呵。

我需要这里发生一些事情。

• 我需要至少有 8 个这样的对象同时执行这种出现和消失的 Action ，彼此重叠并稍微偏移(centerOffset？)。每个出现的方 block 都应该位于之前仍然存在的图像的前面。

• 对象不是彩色方 block ，而应该是从数据库(产品 list )中随机调用的图像。

• 当您将鼠标悬停在任何图片上时，该过程应该会暂停，并且当您将鼠标悬停在该对象上时，该对象会出现在最前面，并显示有关该作品的一些文本。如果您单击它，它会将您导航到元素页面。

注意:随机大小元素很好，但我有一些更高的图像，一些更宽的图像等。不确定如何处理。

Answer 1

要让 8 个对象同时出现/消失，需要大量的动画/计时工作。下一个难点是捕获鼠标悬停在对象上以及何时“来到最前面”，您可能需要 jQuery hover intent 插件。无论如何，这里有一些工作代码可以同时将 8 个随机对象动画化到屏幕上，当您将鼠标悬停在一个对象上时，出现/消失的行为将停止。当鼠标离开对象时，动画将继续:http://jsfiddle.net/amyamy86/Q6XKv/

主要要点是这样的(完整代码参见 fiddle ):

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

这应该足以让您为交互和效果添加所需的详细程度。