CelJak przewijać zawartość w DIV za pomocą jQuery?
Celem jest dysponowanie kontener DIV o stałej wysokości i szerokości i mają zawartość HTML wewnątrz że div automatycznie przewijać w pionie w sposób ciągły.
Pytanie Zasadniczo Utworzyliśmy poniższy kod za pomocą jQuery do przewijania (ruch) dziecko DIV pionowo do góry, aż jego nieszablonowo dominującej ograniczającej gdzie animacja następnie uzupełnia który wyzwala procedurę obsługi zdarzenia, które resetuje pozycję DIV dziecka i ponownie rozpoczyna proces.
Działa to dobrze, więc zawartość przewija się w górę pozostawiając puste miejsce, a następnie ponownie zaczyna się od dołu i przewija w górę.
Problem polega na tym, że wymagania dotyczą tego, aby treść wyglądała tak, jakby była ciągle powtarzana, zobacz poniższy schemat, aby lepiej to wyjaśnić, czy jest jakiś sposób na zrobienie tego? (Nie chcę używać 3rd plug in Strona lub bibliotek innych niż jQuery):
alt text http://www.cameroncooke.com/playground/scrolling-example.gif
Co mam tak daleko
HTML:
<div id="scrollingContainer">
<div class="scroller">
<h1>This is a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>
<p>More content....</p>
</div>
</div>
CSS:
#scrollingContainer{
height: 300px;
width: 300px;
overflow: hidden;
}
#scrollingContainer DIV.scroller{
position: relative;
}
javascript:
/**
* Scrolls the content DIV
*/
function scroll() {
if($('DIV.scroller').height() > $('#scrollingContainer').height()) {
var t = $('DIV.scroller').position().top + $('DIV.scroller').height();
/* Animate */
$('DIV.scroller').animate(
{
top: '-=' + t + 'px'
}
, 4000, 'linear', animationComplete);
}
}
function animationComplete() {
$(this).css('top', $('#scrollingContainer').height());
scroll();
}