2

jquery で雪の結晶を作成しました。div を作成して削除すると、スクリプトが応答しなくなる場合があります。animate() 現在、ページの読み込みと同時に20個のフレークを生成したいというjqueryを試しました。この方法をいつ試したのかわかりませんが、この無反応の原因になる可能性があります (ブラウザが遅すぎます)

これが新しい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();

ここでこれを参照してください

フレーク自体が消えると、一度に 1 つのフレークが表示され、次に生成されます。応答しないスクリプトなしで複数のフレークを生成するにはどうすればよいですか?

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 に答える