2

我在 jquery 中创建了雪花。创建和删除 div 可能会导致脚本无响应。现在我尝试了 jquery，animate() 我想在页面加载的同时生成 20 个薄片。我不确定当我尝试这种方法时可能会导致这种无响应的意思（浏览器变得太慢）

这是新的 jquery 代码

function jquerysnow() {

    snowCount = 20;
       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            jquerysnow();
        });



}
jquerysnow();

在这里看到这个小提琴

现在，一旦薄片自行消失，它就会一次显示一个薄片，然后它会生成下一个薄片。如何在没有无响应脚本的情况下生成多个薄片。

4

2 回答 2

3

检查一下，非常简单，我只是添加了一个触发 jquerysnow() 的函数，然后以随机时间再次调用自身

更新代码现在它只会创建 20 个雪花

snowCount = 0;
function snowFlakes(){
    console.log(snowCount);
    if(snowCount > 20){

        return false
    }else{
    var randomTime = Math.floor(Math.random() * (500) * 2);
    setTimeout(function(){
        snowCount = snowCount +1;
        jquerysnow();
       snowFlakes();
    },randomTime);
    }
}
function jquerysnow() {


       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            //jquerysnow();
        });



}

snowFlakes()

http://jsfiddle.net/v7LWx/390/

于 2013-10-12T11:34:52.827 回答
1

我刚写完一篇关于这个主题的文章，我想我会分享的。

不过，它不是很重 jQuery，主要是纯好的旧 javascript。但它会产生相当不错的降雪效果。

所以，有兴趣的小伙伴们快来看看吧！

于 2013-12-23T08:10:58.733 回答