0

テキストを前後にスライドさせて、文中の 1 つの単語を置き換えるにはどうすればよいですか?

文は次のとおりです。

<p>Lorem <span>ipsum</span> dolor sit.</p>

<span>単語を上にスライドさせ、新しい単語を下からスライドさせる必要があります。

目標は、n秒ごとにローテーションする単語の配列を作成することです。たとえば、次の配列があるとします。

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

.slideUp()既存の単語を配列内の次の単語に置き換えるにはどうすればよいですか?

最終結果は走行距離計の動作に多少似ていると思いますが、テキストが含まれています。わかる？

正しい方向に私を向けることができますか？

4

2 に答える 2

2

コードを書くことなく、簡単なテキスト切り替えの例をまとめました。以前は.slideUp()アニメーションを提供していましたが.animate()、より細かい制御が必要で、走行距離をより長くしたい場合に使用することをお勧めします。これにより、これをどのように達成できるかについてのアイデアが得られることを願っています。

jSFiddle の例

ラフHTML

<div class="widget-container">
    <p>Lorem</p>
    <div class="widget-vert-rotate">
        <!-- jQuery elements will be here -->
    </div>
    <p>dolor sit amet.</p>
</div>

CSS

それらをすべて一列に並べます。上に垂直方向に整列するのは、アニメーションが常に次の単語を文のインラインに配置するようにするためです。単語間隔をエミュレートするための右側のパディングもあります。最後に、ローテーター コンテナーの高さを設定し、そのオーバーフローを非表示に設定します。

.widget-container > * {
    display: inline-block;
    vertical-align: top;
    padding-right: 0.4em;
}

.widget-vert-rotate {
    overflow: hidden;
    height: 1.1em;
}

そしてJS + jQuery

var words = ['ipsum','nunc','telum'],
    i = 0,
    l = words.length,
    el = $('.widget-vert-rotate'),
    t = 3000;

// Create the text elements
for ( ; i < l ; i++ ) {
    $('<p />').text(words[i]).appendTo(el);
}

// Set the interval function
var itv = setInterval(function() {
    var child = el.children().first();
    child.slideUp(1000, function() {
        child.remove();

        el.append(
            $('<p />').text(child.text())
        );
    });
}, t);
于 2012-11-30T22:00:25.087 に答える
0

試してみてもいいと思います

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

myArr.push(myArr.shift());
  • myArr.shift() は「ipsum」を提供します
  • myArr.push() はそれを最後に置きます。

編集：

OK Ryan、これが解決策です。より良いアニメーションを使用できますが、これは例のためです. そして、最初に pop() を間違えました。これは shift() が必要だからです! （こちらも編集）

これを html で使用します。

        <span id="mySpan">plop</span>

jquery で JavaScript にこれを使用します。

var myArr = new Array('ipsum ','alpha ','beta ','gamma ','delta ','epsilon ');
    loop();

    function loop() 
    {
        $("#mySpan").slideUp(3000, function(){
            myArr.push(myArr.shift());

            $("#mySpan").empty();
            $("#mySpan").append(myArr[0]);
            $("#mySpan").show(200);

            loop();
        });
    }

JSFiddle: http://jsfiddle.net/eL3eG/

于 2012-11-30T21:13:10.087 に答える