2

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/

4

2 に答える 2

7

左に行きすぎた場合は、マージンをリセットするだけです。

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();
});

.ticker-text指定した幅ではなく、コンテンツの幅を想定するように CSS を変更する必要があることに注意してください1000%。

.ticker-text {
    height: 150%;
    white-space:nowrap;
    display:inline-block;
}

ここにデモンストレーションがあります：http://jsfiddle.net/fHd4Z/

于 2013-04-02T03:33:30.050 に答える
1

私のコメントを答えに肉付けするだけです：

上記のように、このために設計された既存のフレームワークのいずれかを使用するのが最善だと思います。この機能を簡単にノックアップするには、次のようなものから始めることができます: 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を追加する必要がありました（したがって、独自の行に表示されます）。おそらく、ページ上の他のアニメーションを台無しにしないように、セレクターをより具体的にするでしょう（もしあれば）。

明らかに、これは滑らかさのためにいくつかのタイミングの再調整を行うことができます-その背後で試行錯誤を繰り返すことは気にしませんでしたが、楽しんでください(フレームワークを使用するもう1つの理由)。

私のコメントでは、メソッド slideLeft と slideRight について言及しましたが、それらは存在しません。私の悪い。

于 2013-04-02T05:12:00.957 に答える