Javascript 从数据库中随机调用库图像，间隔重叠 （函数makeDiv（）{ var divsize=（（Math.random（）*100）+50）.toFixed（）； var color='#'+Math.round（0xffffff*Math.random（））.toString（16）； $newdiv=$（''）.css({ “宽度”：divsize+'px'， “高度”：divsize+'px'， “背景色”：颜色 }); var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）； var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）； $newdiv.css({ '位置'：'绝对'， “左”：posx+“px”， 'top'：posy+'px'， “显示”：“无” }).appendTo（'body'）.fadeIn（700）.延迟（3500）.衰减（300，函数（）{ $（this.remove（）； makeDiv（）； }); })();

小提琴：

设计模型：

我试着摆弄我找到的这个代码，但最终我把它弄坏了。在一个例子中，我让代码在每次迭代中加倍对象，它几乎使我的电脑崩溃，呵呵

我需要这里发生一些事情

• 我需要至少有8个这样的对象同时执行这个显示和消失动作，彼此重叠稍微偏移（中心偏移？）。每一个出现的方块都应该出现在之前仍然存在的图像的前面

• 对象不是彩色正方形，而是从数据库（产品目录）随机调用的图像

• 当您将鼠标悬停在任何图片上时，该过程应暂停，当您将鼠标停留在该对象上时，该对象将出现在前面，显示有关该图片的一些文本。如果单击它，它会将您导航到“项目”页面

---

注意：随机大小元素很好，但我有一些较高的图像，一些较宽的图像，等等。不知道如何处理

要保持8个对象同时出现/消失，需要大量的动画/计时工作。下一个难点是捕捉对象上方的鼠标，以及何时“走到前面”，您可能需要jQuery hover-intent插件。无论如何，这里有一些工作代码，可以同时在屏幕上设置8个随机对象的动画，当你将鼠标移到一个对象上时，出现/消失的动作就会停止。当鼠标离开对象时，动画将继续：

主要要点如下（完整代码见fiddle）：

//添加框并设置输入/输出动画
var addBox=函数（）{
var makeBox=函数（）{
var divsize=（（Math.random（）*100）+50）.toFixed（）；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
var newBox=$（''）.css({
“宽度”：divsize+“px”，
“高度”：divsize+“px”，
“背景色”：颜色
});
退换新箱；
};
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({
'位置'：'绝对'，
“左”：posx+“px”，
“顶部”：posy+“px”，
“显示”：“无”
}).appendTo（'body'）.fadeIn（动画速度/2，函数（）{
如果（计时器！==null）{
$（本）
.延迟（设置速度*最大框的动画）
.fadeTo（1，1，函数（）{
如果（计时器！==null）{
var id=$（this.attr（'id'）；
移除框（id）；
}
});
}
});
boxIdList.push（boxIds++）；
lastBox=新箱；
numBoxes++；
退换新箱；
};
//以动画速度间隔添加框，如果框太多，则不要添加
var animateBox=函数（）{
如果（数量箱<最大箱）{
addBox（）；
}否则{
removeBox（boxIdList[0]）；
}
timer=setTimeout（animateBox，ANIMATE_SPEED）；//为下一个间隔重新设置计时器
};
//开始一切
var start=函数（）{
定时器=设置超时（动画盒、动画速度）；
};

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

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

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