總是在字幕中顯示文字

我的目標是始終在沒有空格的標籤字幕上顯示文字。文字應該始終顯示在這個通常的動畫中。總是在字幕中顯示文字

我的目標是始終顯示在我的標籤滾動字幕文本無空格。文字應該始終顯示在這個通常的動畫中。在我的真實項目中，我經常收到推文，並且將它們放入跑馬燈中，我刪除了第一張，然後在金額爲5的情況下製作了一個.append（如果10條推文到達一個不太好的解決方案第二，用戶無法很好地閱讀選取框，我想在選取框內有5個跨度，在某個時候，我的網頁開始變慢，通過不斷執行.append和多個跨度元素）。

在設定的時間間隔中，我彷彿收到推文，但在某一時刻動畫不是流暢的，或重新開始顯示空格。我想顯示的唯一空間是最初的，否則我不想顯示空格。

我不知道如何解決這個問題，或者如果有一個事件或事情我可以做的，當第一跨度離開容器，以添加新元素檢測和可閱讀好選擇。

我試過了幾個庫，但沒有一個適合我的問題。我希望你能幫助我。

http://jsfiddle.net/fq2z6o99/

<div id='container_marquee'> 
    <marquee id='mymarquee' behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();"> 
       <span>first marquee text</span> 
       <span>second marquee text</span> 
       <span>third marquee text</span> 
       <span>fourth marquee text</span> 
       <span>fifth marquee text</span> 
    </marquee> 
    </div>

來源

2017-08-31 yavg

https://stackoverflow.com/questions/21427999/how-to-remove-trailing-space-from-marquee你試過了嗎？ – Shubhranshu

選取框標記已過時 - 您最好編寫代碼來完成選取框的功能，然後您可以做到這一點betterer –

@Shubhranshu http://jsfiddle.net/rt87hdv5/我已經重新創建瞭解決方案，但我不知道如何在我的真實例子中添加短語，也許你可以幫助我。 – yavg

使用選取框行爲=備用

來源

2017-08-31 04:58:55

我已經看到它是如何工作的，但它不能解決我的問題。 – yavg

https：//www.stevesouders。com/blog/2010/05/11/appendchild-vs-insertbefore/ –

我已動態添加第六滾動字幕文本。嘗試了這樣的事情。希望對你有幫助...！與此

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script> 
 
<style> 
 
.marquee { 
 
    width: 300px; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background: #ccc; 
 
} 
 
.marquee span{ 
 
\t margin:0 15px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="marquee"> 
 
\t <span>first marquee text</span> 
 
\t <span>second marquee text</span> 
 
\t <span>third marquee text</span> 
 
\t <span>fourth marquee text</span> 
 
\t <span>fifth marquee text</span> 
 
</div> 
 
</body> 
 
<script> 
 
$('.marquee').marquee({ 
 
    //speed in milliseconds of the marquee 
 
    duration: 5000, 
 
    //gap in pixels between the tickers 
 
    gap: 50, 
 
    //time in milliseconds before the marquee will start animating 
 
    delayBeforeStart: 100, 
 
    //'left' or 'right' 
 
    direction: 'left', 
 
    //true or false - should the marquee be duplicated to show an effect of continues flow 
 
    duplicated: true 
 
}); 
 
$(".marquee span:last-child").after("<span>Sixth marquee text</span>"); 
 
</script> 
 
</html>

來源

2017-08-31 06:53:41

我最初嘗試使用這個插件。但是，如果您在動態添加文本時不能停止或重新開始動畫，我將選擇您作爲最佳答案。 – yavg

這將是非常有用的，但正如我所說，我需要添加一個句子，而無需重新啓動整個選框 – yavg

我的意思是，選框重新啓動之前顯示新添加的句子http://jsfiddle.net/pt4rwo35/ – yavg

您可以編寫自定義jQuery代碼再次嘗試更換字幕標記。

試試下面的代碼可能是它可以幫助你：

<html> 
<head> 
<style> 
* { 
    margin:0; padding:0 
} 
div { 
    background: white; 
    width: 600px; 
    height: 40px; 
    border: 2px solid red; 
} 
div p { 
    position: relative; 
} 
</style> 
</head 
<body> 
<div> 
    <p>Lorem ipsum dollar sit, lorem ipsum dollar</p> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
var animation = function() { 
    $('div p').animate({left: '320'}, 5000, 

    function() { 
     $('div p').animate({left: '0'}, 5000); 
     animation(); 
    }); 
}; 

animation(); 

</script> 
</body> 
</html>

來源

2017-08-31 10:10:54

總是在字幕中顯示文字

回答

相關問題