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

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/