1. Zuhause
  2. Frage und Antwort
  3. HTML/JQuery: Ein div mit einem scrollenden Hintergründe, die nie endet?

HTML/JQuery: Ein div mit einem scrollenden Hintergründe, die nie endet?

2012-03-29 4 views
0

Ich habe ein div-Element der Breite 400px und ein Hintergrundbild der Breite 2000px. Ich möchte dieses Hintergrundbild endlos seitlich scrollen, es darf nie erreichen und enden, weil das BG-Bild eingestellt ist, um zu wiederholen (HTML tut dies standardmäßig, denke ich).HTML/JQuery: Ein div mit einem scrollenden Hintergründe, die nie endet?

Ich dachte an so etwas wie dies zu tun, aber ich weiß nicht, ob es der richtige Weg ist:

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

Quelle

2012-03-29 user1091856

+0

Ich würde davor warnen. Es scheint ein benutzerfreundlicher Albtraum für Ihre Besucher zu sein. Sie könnten denken, dass etwas nicht stimmt, da das Scrollen nie aufhört. –

+0

Wovon redest du ??? Es funktioniert wie ein , aber Sie können nicht mit Hintergrundbildern festzuhalten. Denken Sie, dass etwas falsch ist, wenn Sie ein Zelt sehen? – user1091856

+0

Ok, ich verstehe jetzt. Nun, ein Festzelt ist etwas anderes als das, was ich dachte, als ich deine Beschreibung gelesen habe. Immer noch nicht sicher, dass dies die Methode ist, die Sie verwenden möchten. –

Antwort

0

die Unsicherheit zu überwinden, wie lange (und wie weit) die Animation laufen muß, Sie tun können, dies mit eine Single-Cycle-Animation mit "Flyback-Repeat". Dies ist mehr wie die Art und Weise, wie Ticker allgemein codiert sind.

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

Sie müssen this jQuery plugin verwenden bg Animation zu bekommen Cross-Browser zu arbeiten.

Demo here.

Passen Sie meine 4000 Millisekunden an, um die gewünschte Geschwindigkeit zu erhalten (kleinere Zahl = schnellere Animation).

'linear' ist wichtig, um einen möglichst weichen Übergang beim Rücklauf zu geben. Ich denke, die jQuery-Standard-Swing-Lockerung würde einen seltsamen Effekt haben, aber versuchen Sie es auf jeden Fall.

Quelle

2012-03-29 03:44:20

Verwandte Themen

 Verwandte Themen