Question

目标

目标是拥有一个具有固定高度和宽度的容器DIV，并且该内容中的HTML内容会自动连续垂直滚动。

问题基本上我已经使用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();
}

Answer 1

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

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

Answer 2

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

Answer 3

简单地说，你需要两个大于滚动框的div，你需要移动那个在那个下面看不到的那个。如果两者完全相同，那就不应该引人注意了。

Answer 4

试试这个：

$('.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

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

4 个答案: