2012-03-29 4 views
0

私は幅400pxのdiv要素と幅2000pxの背景画像を持っています。 このバックグラウンドイメージを無限に横にスクロールしたい場合は、bgイメージがリピートに設定されているため、決して到達して終了してはいけません(HTMLはデフォルトでこれを行います)。HTML/JQuery:終わりのないスクロールバックグラウンドを持つdiv?

私はこのような何かをやって考えるが、私はそれが正しい方法だ場合は知らない:

$("#divWithScrollingBackground").animate({"background-position-x" : 999999999}, 999); 
+0

私はこれに対して注意します。それはあなたの訪問者のための使い勝手の悪夢と思われる。彼らは何かが間違っていると思うかもしれない。 –

+0

あなたは何について話していますか?それはのように動作しますが、背景画像でマーキーを行うことはできません。マーキーを見るとき何かが間違っていると思いますか? – user1091856

+0

さて、わかりました。まあ、マーキーは、私があなたの説明を読むときに思っていたものとは違ったものです。しかし、これがあなたが使いたい方法であるかどうかはまだ分かりません。 –

答えて

0

アニメーションが実行する必要がありますどのくらい(とどこまで)の不確実性を克服するために、あなたがこれを行うことができますフライバックリピートの1サイクルアニメーションです。これは一般的にティッカーがコード化されているようなものです。

function bgScroll() { 
    $("#x").animate({ 
     'backgroundPosition': '-2000px 0' 
    }, 4000, 'linear', function() { 
     $(this).css("backgroundPosition", '0 0'); 
     setTimeout(bgScroll, 0); 
    }); 
}; 
bgScroll(); 

あなたはクロスブラウザを動作するようにBGアニメーションを取得するためにthis jQuery pluginを使用する必要があります。

デモhere

私の4000ミリ秒を調整して、必要なスピードを与えます(より小さい数値=より速いアニメーション)。

「直線的」は、フライバックでできるだけ滑らかな遷移を与えるために重要です。私は、jQueryのデフォルトの「スイング」イージングは​​奇妙な効果をもたらすと思いますが、是非試してみてください。

関連する問題