2

我正在开发一个在 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/

4

2 回答 2

7

当它离得太远时，只需重置边距：

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/

于 2013-04-02T03:33:30.050 回答
1

只是为了将我的评论充实到一个答案中：

如上所述，我相信您最好使用为此设计的现有框架之一。就该功能的快速启动而言，您可以从以下内容开始：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 - 它们不存在。我的错。

于 2013-04-02T05:12:00.957 回答