HTML / JQuery: div с прокруткой фона, который никогда не заканчивается? - PullRequest
Новая
       1

HTML / JQuery: div с прокруткой фона, который никогда не заканчивается?

0 голосов
/ 29 марта 2012

У меня есть элемент div шириной 400px и фоновое изображение шириной 2000px. Я хочу, чтобы это фоновое изображение бесконечно прокручивалось вбок, оно никогда не должно доходить и заканчиваться, потому что изображение bg настроено на повторение (думаю, HTML делает это по умолчанию).

Я думал о том, чтобы сделать что-то подобное, но я не знаю, правильно ли это: 

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

1 Ответ

0 голосов
/ 29 марта 2012

Чтобы преодолеть неопределенность того, как долго (и как далеко) должна выполняться анимация, вы можете сделать это с помощью анимации с одним циклом с «flyback-repeat». Это больше похоже на способ кодирования тикеров. 

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

Вам потребуется использовать этот плагин jQuery , чтобы анимация bg работала в кросс-браузерном режиме.

Демо здесь .

Настройте мои 4000 миллисекунды, чтобы получить желаемую скорость (меньшее число = более быстрая анимация).

«линейный» очень важен, чтобы обеспечить как можно более плавный переход при обратной передаче. Я думаю, что jQuery по умолчанию, «колебание», даст странный эффект, но обязательно попробуйте.

...