(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/
设计模型:https://i.stack.imgur.com/kEJOJ.jpg
我试着摆弄我找到的这段代码,但我只是最终屠杀它并破坏它。在一个例子中,我的代码每次迭代都会使对象加倍,这几乎使我的PC崩溃。
我需要这里发生一些事情。
我需要至少有8个这样的对象同时执行这个出现和消失的行为,相互重叠稍微偏移(centerOffset?)。
对象不是彩色方块,而应该是从数据库(产品库存)中随机调用的图像。
当您将鼠标悬停在任何图片上时,该过程应该暂停,并且当您将鼠标放在该对象上时,该对象将出现在前面,并显示有关该块的一些文本。如果你点击它,它会把你导航到项目页面。
注意:随机大小元素很好,但我有一些更高的图像,一些更宽的图像等。不知道该怎么处理。
有相当多的动画/计时工作,以保持8个对象同时出现/消失。下一个难点是捕捉对象上的鼠标,以及何时"来到前面",您可能需要jQuery hover intent插件。无论如何,这里有一些工作代码,将同时动画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);
};
这应该是足够的工作,以增加你想要的交互和效果的细节水平。