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来制作动画

（您应该能够在IE中使用带有this kind of thing）

的画布

Answer 2

在canvas元素中使用vanilla JavaScript，它会飞。

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

jquery粒子发生器

2 个答案: