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

小提琴：http : //jsfiddle.net/redler/QcUPk/8/

设计模型：http: //i.imgur.com/D4mhXPZ.jpg

我试过摆弄我找到的这段代码，但我最终还是把它弄坏了。在一个例子中，我的代码每次迭代都会使对象翻倍，它几乎让我的 PC 崩溃了，呵呵。

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

  • 我需要至少有 8 个这样的对象同时执行这个出现和消失的动作，彼此重叠稍微偏移（centerOffset？）。每个出现的正方形都应该位于仍然存在的先前图像的前面。

  • 这些对象不是彩色方块，而应该是从数据库（产品清单）中随机调用的图像。

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

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

4

1 回答 1

0

有相当多的动画/定时工作来保持 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);
};

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

于 2013-03-22T07:31:41.717 回答