2

これがjQueryでの私の試みです：

$(document).ready(function(){
$('#bg').animate({ backgroundPosition: '320px 0px'}, 10000, 'linear');
});

bgのCSSは次のとおりです。

#bg {
    background: url('scribbles.png') repeat-x 320px 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTMLは次のとおりです。

<div id="bg"></div>

背景画像をゆっくりと画面上で動かしたい。助言がありますか？

ありがとう！

4

2 に答える 2

3

画像は永遠にスクロールし続けますか？そうでない場合は、以下が出発点として適している可能性があります。

$('#bg').animate({ backgroundPosition: '+=100% 0px'}, 10000, 'linear');

永久に繰り返す場合は、再帰的なコールバックを使用して次の解決策を検討してください。

var animateBackground = function()
{
    $('#bg').animate
    (
        { 
            backgroundPosition: '-=100px 0px'
        }, 
        10000,
        'linear',
        function()
        {
            animateBackground(); // recursive call back
        }
    )
};

$( // short-hand for "$(document).ready"
    function()
    {
        animateBackground(); // initial call that starts everything off
    }
);
于 2012-05-07T16:08:15.377 に答える
1

バックグラウンドの位置は、cssとjqueryの両方の場合で同じです。それらは異なるはずです。なぜ動かないのか？cssで前の位置を設定し、コードのjquery部分で最後の位置を指定します。それはうまくいくでしょう！

于 2012-05-07T15:57:53.480 に答える