如何在 JQuery 中创建水平循环代码答案

【问题标题】：How to create a horizontal looping ticker in JQuery如何在 JQuery 中创建水平循环代码
【发布时间】：2013-04-02 03:21:38
【问题描述】：

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

【问题讨论】：

您需要将每个文本部分包装在一个元素中，然后在元素完全看不见时将它们移回开头。
您确定没有适合您用途的轮子吗？如果您确实觉得有必要重新发明一个，workshop.rs/2011/09/news-ticker-in-4-lines-of-jquery 有一个很棒的关于垂直行情的教程。您可以通过更改效果（例如，slideLeft 而不是 slideUp）和目标元素（一个快速而巧妙的解决方案是将字符串拆分为“”，然后用<span class="tickerChar"></span> 包装每个字符）使其水平。也就是说，为什么不jquerynewsticker.com？

标签： javascript jquery html css

【解决方案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/

【讨论】：

【解决方案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 - 它们不存在。我的错。

【讨论】：