マーキーに常にテキストを表示

私の目標は、スペースを使わずに常にタグマーキーにテキストを表示することです。この通常のアニメーションでは、常にテキストが表示されます。マーキーに常にテキストを表示

私の目標は、常にスペースを入れずに私のタグマーキーのテキストを表示することです。この通常のアニメーションでは、常にテキストが表示されます。実際のプロジェクトでは、つねにツイートを受け取っています。マーキーに入れています。最初のものを削除してから、その量が5であればappendを作成します（良い解決策ではありません。ユーザーがマーキーをうまく読むことができません。私はマーキーの内側に5つのスパンを持っていますが、Webページは常に.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

マーキータグは時代遅れです - マーキーが行うことを行うためのコードを書いたほうがいいですし、それでベターラーをすることができます –

@Shubhranshu http://jsfiddle.net/rt87hdv5/解決策を再作成しましたが、わかりません私の本当の例のようにフレーズを追加する方法、多分あなたは私を助けることができます。 – yavg

使用マーキー挙動=代替

出典

2017-08-31 04:58:55

私はそれがどのように機能するのか見てきましたが、私の問題は解決しません。 – yavg

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

iが、動的に第マーキーテキストを追加しました。このようなことを試してみた。これがあなたを助けることを願って...！あなたはマーキータグを置き換えるために、カスタムjQueryのコードを書くことができ、この

<!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

で再試行してください。

<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

マーキーに常にテキストを表示

答えて

関連する問題