如何在JQuery中創建水平循環報價器

我正在研究循環在div正文內的文本的報價器。我可以讓它以指定的速度移動文本，但我無法弄清楚如何讓JQuery循環文本。一旦div中的內容已經達到最後，我如何循環回來，同時仍然顯示尾部的剩餘內容？如何在JQuery中創建水平循環報價器

代碼：

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/

來源

2013-04-02 Emanegux

您需要將每個文本部分包裹在一個元素中，然後在元素完全看不見時將元素移回到開頭。 –

您確定已經有沒有適合您目的的車輪嗎？如果你覺得有必要重新創建一個，http://workshop.rs/2011/09/news-ticker-in-4-lines-of-jquery/有一個關於做垂直行情的好教程。你可以通過改變效果（例如，slideLeft而不是slideUp）來使其水平化，並且目標元素（一個快速和不可靠的解決方案是將字符串分割爲「」，然後用'）。那說，爲什麼不是http://www.jquerynewsticker.com/？ –

只是重置保證金，當它被過於靠左：

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-02 03:33:30

只是爲了充實我的評論進入一個答案：

如上所述，我相信你會最好使用爲此設計的現有框架之一。 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來停止顯示爲塊的動畫字符（並因此在它們自己的行上）。你可能會讓選擇器更具體，以免與頁面上的其他動畫混在一起（如果有的話）。

很明顯，這可以做一些時序調整爲平滑緣故 - 我不能被困擾做背後的niggly試驗和錯誤工作，但有樂趣（另一個原因使用框架）。

在我的評論中我提到了slideLeft和slideRight方法 - 它們不存在。我的錯。

來源

2013-04-02 05:12:00

如何在JQuery中創建水平循環報價器

回答

相關問題