0

バスの窓のような固定フレームで、幅約 800px のパララックス シティと、ビルボードのコンテンツが間隔を空けて配置されているので、それらの間をスクロールすると視差がバスが動いているように見えるというアイデアがありました。コンテンツは、スプライトのようにウィンドウよりもはるかに大きくなり、scrollBy (x amount, 0) になる前後のボタンを配置します。動作する視差スクリプトと、すべて正常に動作する 3 レイヤーの大まかな街並みがあります。

壁にぶち当たりました。1000px スクロールした後に scrollBy アニメーションをクリアしようとしています。次にもう一度クリックすると、さらに 1000px 移動します。これが私の機能です。

function scrollForward() {
    window.scrollBy(5,0);
    scrollLoop = setInterval('scrollForward()',10);
}

今のところ1000までしかクリアできません。2000 ectですが、最初のものの後は非常に速く進み、クリアしません。

4

2 に答える 2

0

Excelsior https://stackoverflow.com/users/66580/majid-fouladpourは、別の質問を持つ他の誰かのために素晴らしいコードを書きました。他の人が望んでいたものにはまったく合っていませんでしたが、私にとっては完璧です.

function scrollForward() {
    var scrolledSoFar = 0;
    var scrollStep = 75;
    var scrollEnd  = 1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
    }, 10);
}

function scrollBack() {
    var scrolledSoFar = 0;
    var scrollStep = -75;
    var scrollEnd  = -1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar <= scrollEnd ) clearInterval(timerID);
    }, 10);
}

ステップ 2 では、このコンテンツ アニメーションをフレームの後ろに配置する方法を考えます。

于 2012-11-09T15:42:06.650 に答える
0

ここで何を尋ねているのかよくわかりません。おそらく、より関連性の高いコードを提供できますか?

あなたのコードに潜在的な問題があると思います。setInterval('scrollForward()', 10)これを呼び出すscrollForwardと、10ms ごとに呼び出されます。ただし、これらの呼び出しのたびに、再帰の一種の爆発を作成するscrollForward間隔が長くなります。scrollForwardおそらくsetTimeout、この関数の外で間隔を使用または作成する必要があります。

また、余談ですが、コードを単純に次のように変更できますsetInterval(scrollForward, 10)。引用符と括弧を削除すると、読みやすく、管理しやすくなります。次のような複雑なラムダ関数を配置することもできます。

setInterval(function() {
   scrollForward();
   // do something else
 }, 10);

編集: したがって、scrollForward がアイテムを 10 ピクセル移動することがわかっていて、アイテムを 1000 ピクセル移動した後に停止したい場合は、移動を停止する必要があります。コードが実際にどのように構成されているかはまだわかりませんが、次のようになります。

(function() {
  var moved_by = 0;
  var interval = null;

  var scrollForward = function() {
     // move by 10px
     moved_by += 10;
     if (moved_by === 1000 && interval !== null) {
        clearInterval(interval);
     }
  };

  var interval = setInterval(scrollForward, 10);
})();

1000 年または 2000 年以降にクリアしたい場合は、ifそれに応じてステートメントを調整するだけです。それが役立つことを願っています。

于 2012-11-08T22:48:35.060 に答える