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）

我的插件还利用CSS3动画感谢jquery.animate-enhanced

的（你应该可以在IE中使用画布this kind of thing）

Answer 2

使用香草的JavaScript在canvas元素，它会飞行。

如：http://www.ferretarmy.com/files/canvas/canvasParticle/canvasParticle2.html