Question

我有this jsfiddle我不能为我的生活弄清楚如何让内容在自动滚动时没有差距。基本上当内容到达底部时我希望循环立即重启，因此再次显示div之间没有很大的差距。任何帮助将不胜感激。感谢。

我正在使用的代码是

function autoScroll(){
var top = parseInt($(".inner").css("top").replace("px",""));
var height = $(".outer").outerHeight();
if(top <  height) {
   $(".inner").animate({"top":height},25000,autoScroll)           
}
else {
    $(".inner").css({"top":-height});
    autoScroll();
} 
}
autoScroll();

Answer 1

您可以复制.inner的内容，保持外部高度不变，以便隐藏一半内容。然后动画，以便在每个高度移动周期，你跳回来。由于重复的内容，这种跳跃不会很明显：

function autoScrollDown(){
    $(".inner").css({top:-$(".outer").outerHeight()}) // jump back
               .animate({top:0},5000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate
}
// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();

*{
    margin:0;
    padding:0;
}
.inner{
    position:relative;
    top:0px;
}
.outer{
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner">
        <h3>Scrolling down... line 3</h3>
        <h3>Scrolling down... line 2</h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
        <h3> Scrolling down... line 1 </h3> 
    </div>
</div>

Javascript AutoScroll Loop Div Content

1 个答案: