如何使用jQuery在DIV内连续滚动内容？

目的是一个具有固定的高度和宽度具有容器DIV和具有内的HTML内容垂直连续DIV自动滚动显示。

问题基本上我已经创建下面使用jQuery滚动（移动）子DIV垂直向上的代码，直到它的边界框父其中动画随后完成其触发的事件处理程序，其重置的位置外孩子DIV并再次启动该过程。

这工作正常，所以内容向上滚动留下一个空白区域，然后再次从底部开始滚动。

我遇到的问题是，对于内容的要求就好像它不断重复出现，请参见下图以更好地解释这一点，有没有办法做到这一点？（我不希望使用第三方插件或库比jQuery的除外）：

alt text http://www.cameroncooke.com/playground/scrolling-example.gif

我有什么到目前为止

的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(); 
}

来源

2010-04-09 Camsoft

你需要复制你的内容元素，并对准他们，使他们上下彼此相邻，并串联滚动它们。您当前的滚动应该可以工作，跳跃将不可见，因为它应该从底部元素的顶部跳到顶部元素的顶部，也就是说，跳转到相同的部分。我把这两个内容副本（你可以只是.clone它得到另一个副本）在一个容器中滚动，这样你就不必担心移动两个元素。

如果您想真正优化它，您只能在底部元素中显示内容的顶部（足以隐藏跳转），但除非您的内容非常复杂和繁重，否则不值得付出努力。

来源

2010-04-09 17:38:25

你想让内容“自动重复”并永远滚动吗？您应该能够在文本下方添加新的DIV，并将该文本复制到新的DIV中。根据滚动位置执行此操作，当它从视图中移出时移除上面的DIV。基本上，你只是复制文本，将新的DIV推到“堆栈”的底部，并在不可见时将其弹出顶端。

来源

2010-04-09 17:41:34

简单地说，你需要两个大于滚动框的div，并且你需要移动一个不可见的标记。如果两者完全相同，则不应引起注意。

来源

2010-04-09 17:44:29 Peter

试试这个：

$('.upBut').bind('click',function(){ 
    $('.articleWrapper').prepend($('.article:last')).children('.article:first').css({display:'none'}).show('slow'); 
}); 
$('.downBut').bind('click',function(){ 
    //$('.articleWrapper').append($('.article:first')).children('.article:last').css({display:'none'}).show('slow'); 
    $('.article:first').hide('slow',function(){$(this).appendTo('.articleWrapper').show('slow');}); 
}); 
$('.upBut').hover(function(){$(this).css("background-image", "url(images/up_green.png)");},function(){$(this).css("background-image", "url(images/up_red.png)");}); 
$('.downBut').hover(function(){$(this).css("background-image", "url(images/down_green.png)");},function(){$(this).css("background-image", "url(images/down_red.png)");});

工作例子可以看这里： http://www.timeswellness.com/index.aspx?page=others&rightnav=false&do=CancerDay

来源

2012-02-10 05:56:42

如何使用jQuery在DIV内连续滚动内容？

回答

相关问题