Question

我正在研究一个在div体内循环文本的自动收报机。我可以让它以指定的速率移动文本，但我无法弄清楚如何让JQuery循环文本。一旦div中的内容到达结尾，如何在仍然显示尾部的其余内容的同时将其循环回来？

代码：

var left = -500;
$(document).ready(function(e){
function tick() {
        left++;
        $(".ticker-text").css("margin-left", -left + "px");
        setTimeout(tick, 16);
  }

  tick();
});

HTML：

<div class = "ticker-container">
    <div class = "ticker-text">
        start text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text end     
    </div>
</div>

http://jsfiddle.net/mxu4v/1/

Answer 1

只要在距离太远时重置边距：

var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;
$(document).ready(function(e){
    function tick() {
        if(--left < -width){
            left = containerwidth;
        }
        $(".ticker-text").css("margin-left", left + "px");
        setTimeout(tick, 16);
    }
    tick();
});

请注意，必须更改CSS，以便.ticker-text假定其内容的宽度，而不是您指定的1000%：

.ticker-text {
    height: 150%;
    white-space:nowrap;
    display:inline-block;
}

以下是演示：http://jsfiddle.net/fHd4Z/

Answer 2

只是为了回答我的评论：

如上所述，我相信您最好使用为此设计的现有框架之一。就快速敲击功能而言，您可以从以下内容开始：http://jsfiddle.net/B9ruA/

JS：

var tickerId="#tickerText";
function tickify(e) {
    var text=$(e).text().split("");
    var newText="";
    for (var i=0;i<text.length;i++) {
        newText+="<span class='tickerChar'>" + text[i] + "</span>";
    }
    $(e).html(newText);
}
tickify(tickerId);
function tick(){
    $(tickerId + " span.tickerChar:first").hide("slide",{direction:"left"},50,function(){$(this).appendTo($(tickerId)).show("slide",{direction:"right"},50);});
}
setInterval(function(){tick()},200);

HTML：

<div id="tickerText">  woo, here is some text for ticking, text that ticks, ticky text to test with  </div>

CSS：

div.ui-effects-wrapper {
    display:inline;
}

注释：

我必须添加一些css来阻止动画角色显示为块（因此在他们自己的行上）。您可能会使选择器更具体，以免与页面上的其他动画混在一起（如果有的话）。

显然，这可以通过一些时间重新调整来实现平滑 - 我无法为这背后的琐事试验和错误工作而烦恼但是玩得开心（使用框架的另一个原因）。

在我的评论中我提到了方法slideLeft和slideRight - 它们不存在。我的坏。

如何在JQuery中创建水平循环滚动条

2 个答案: