1

雲が動いているような背景を作ろうとしていたのですが、雲を動かした後、ブラウザの最大幅に達したら停止して戻るか、消えるようにする必要があることに気づきました。私は彼らのポジションを取得しようとしていましたが、すべてのポジションを動的に取得することはできません。現在（簡単にするために）テストに使用しているクラウドは1つだけで、これを実行します。

$(function () {
    var p = $('.clouds').position();
    var w = $("#sky").width();
    while (p < w);
    $('.clouds', this).stop().animate({ left: "+=50000px" }, { queue: false, duration: 90000 });
});

つまり、その位置は動的に更新されず、最初に取得した位置に固定され、whileループ内で移動しようとしましたが、機能しませんでした...そのため、現時点では少し動かなくなっています。 ..誰かが私がこれをどのように達成できるかについての考えを持っていますか？雲の画像は元々上：0左：0に設定されています

4

6 に答える 6

1

ループする背景画像を使用して、background-position cssプロパティを変更してみませんか？

編集：これを自動的に行うjqueryプラグインがあるかどうかはわかりませんが、setIntervalとmodulusを使用した昔ながらのjavascriptでは十分に簡単なはずです。

たとえば、背景画像の幅が400ピクセルの場合、cssは次のようになります。

body { 
    background: transparent url(yourbackground.png) repeat-x scroll 0 0;
}

そしてjavascriptは次のようになります：

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    $('body').css("background-position", (-1 * BGPosition) + "px 0px");
}

var si = setInterval(scrollBodyBG,100)

編集：テストされ、動作しています（jqueryなし）

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    document.body.style.backgroundPosition = (-1 * BGPosition) + "px 0px";
}

document.addEventListener("DOMContentLoaded",function() { setInterval(scrollBodyBG,100);},false);

明らかに、これはIEイベントリスナーのサポートのために変更する必要があります

于 2009-06-09T07:40:08.753 に答える
1

投稿したコードは、使用しているものの直接コピーですか？その場合、アニメーションの呼び出しは、セミコロンで短くカットされているため、whileループには含まれません。中括弧を使用してみてください。保守と確認がはるかに簡単になります。:)

while(p < w) {
     $('.clouds',this).stop().animate({left:"+=50000px"},{queue:false, duration:90000});
}

また、ループが完了することはないと思います。これらの変数の値はどちらも反復中に変更されないため、終了することはありません。それが機能するためには、反復ごとに、ループ内の「p」変数を変更（更新）する必要があります。

編集：実際には、それをスクラッチします。elem.position()数値（）ではなくオブジェクトを返すため、ループは開始されませんNaN。それを機能させるには、が必要elem.position().leftです。

于 2009-06-09T07:44:01.850 に答える
1

このコードはあなたに役立つと思います。これを試してみてください！

$('.clouds').animate({ top: 0 }, { queue: false, duration: 90000 });

setInterval(function () {
    if ($(".clouds").position().top == 0) alert("Rain");
}, 5000);

5 秒ごとに「雲」クラスの位置をチェックし、ゼロの場合はアラートを出します!

複数のクラウドの場合、以下のコードを使用できます

setInterval(function () {
    if ($(".clouds").position().top == 0) {
        $(".clouds").each(function () {
            if ($(this).position().top == 0) $(this).remove();
        });
    }
}, 1000)
于 2009-06-09T14:25:41.647 に答える
0

どうですか：

 while($('.clouds').position().left < $("#sky").width())
 {
       // do stuff
 }
于 2009-06-09T07:56:02.543 に答える
0

これを確実に行う唯一の方法は、突然変異イベント DOMAttrModified (たとえば) と IE の独自の「onpropertychange」を使用して、DOM 要素のプロパティの変更をリッスンすることです。

誰かがこれを Jquery に移植しました。記事はこちらです。

http://www.west-wind.com/Weblog/posts/453942.aspx

于 2009-06-09T08:43:02.713 に答える
0

すべてを関数に入れて、たとえば moveCloud() としましょう

次に、アニメーション位置のコールバックを使用して、その関数を呼び出します。関数の開始時に、雲の位置を確認します。

- 0 の場合は、最大幅に達するまで右に移動します

-最大幅の場合は、0になるまで左に移動します

アニメーションが完了すると、コールバックが実行されて関数が再度呼び出され、雲が画面の反対側に移動します。

于 2009-06-09T13:21:11.870 に答える