jquery粒子生成器

Question

我用 Jquery 制作了一个粒子生成器，它工作正常，但它有点占用 CPU。如有任何建议，我们将不胜感激。

function particles() {

$.each($('.particles'), function () {
    if ($(this).css("opacity") == 0) {
        $(this).remove();
    }
});

var particleSize = Math.floor(Math.random() * 4 + 1);

var speed = Math.floor(Math.random() * 5000 + 3000);
var distance = Math.floor(Math.random() * 500 + 200);
var fallOffSpeed = speed / 2;
var fallOff = distance + distance / 2;

$('body').prepend($($('<div>', {
    "class" : "particles",
    "height": particleSize,
    "width": particleSize
}).css({
    "background-color": "red",
    "position": "absolute",
    "top": Math.floor(Math.random() * 39),
    "z-index": "-1"
}).animate({
    "left": distance
}, speed, 'linear').animate({
    "left": fallOff,
    "opacity" : "0"
}, fallOffSpeed, 'linear')));

setTimeout(particles, 1000);

}

Answer 1

我刚刚创建了一个非常小的jQuery plugin用于从元素生成粒子 ( demo )

由于 jquery.animate-enhanced，我的插件还利用了 CSS3 的动画

(您应该能够通过 this kind of thing 在 IE 中使用 Canvas )