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