如何在JQuery中创建一个水平循环计时器

How to create a horizontal looping ticker in JQuery

本文关键字：一个 水平 计时器 循环 JQuery 创建      更新时间：2023-09-26

我正在制作一个在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/

当它太左时就重新设置边距:

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/

让我的评论变成一个答案:

如上所述，我相信您最好使用为此设计的现有框架之一。为了快速了解该特性，您可以从以下内容开始: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来阻止动画角色被显示为块(因此在他们自己的行上)。你可能会让选择器更具体，以避免与页面上的其他动画(如果你有的话)发生冲突。

显然，为了平滑起见，这可以做一些时间调整-我不能麻烦地做繁琐的试验和错误的工作，但有乐趣(另一个使用框架的原因)。

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

相关文章：