1

入力テキスト効果を得る簡単な方法を提供しようとしていますが、HTML タグも許可する可能性があります。機能するコードがいくつかありますが、タグがテキストの一部と見なされていることがわかります。

たとえば、テキストが の場合"Anyone is <b>awesome</b>、太字部分に到達すると次のように表示されます。

<
<b
<b>
<b>a
<b>aw
<b>awe
<b>awes
<b>aweso
<b>awesom
<b>awesome
<b>awesome<
<b>awesome</
<b>awesome</b
<b>awesome</b>

文字列から削除せずにhtmlノードをスキップするにはどうすればよいですか? フォーマットを機能させ続けたい。

これまでに行ったことは次のとおりです。

<div id="foo"></div>

$.fn.typer = function (text, options) {
    options = $.extend({}, {
        delay: 1000,
        duration: 1000,
        easing: 'linear',
        endless: false
    }, options);
    var elem = $(this);
    (function loop(i) {
        var e = typeof text === 'string' ? text : text[i];
        // strip html tags, might be helpful
        // e.replace(/(<.*?>)/ig,"")
        $({len: 0}).delay(options.delay).animate({len: e.length}, {
            duration: options.duration,
            easing: options.easing,
            step: function (now) {
                var pos = Math.ceil(now),
                    char = e.substr(pos, 0);
                elem.html(e.substr(0, pos));
            },
            complete: function () {
                i++;
                if (i === text.length && !options.endless) {
                    return;
                } else if (i === text.length) {
                    i = 0;
                }
                loop(i);
            }
        });
    })(0);
};

$('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</>!', 'Foo bar.']);

作業デモ:

http://jsfiddle.net/ARTsinn/RED9H/2/

アップデート

とった！

jQueryのanimate-functionのない例。

改善点があれば、ここで共有してください!

4

2 に答える 2

0

「あなたのためにそれをBingさせてください！」のようなものです。しますか？例

タイピング効果を実行する Javascript はダウンロードできますが、最初にライセンス条項を確認してください。http://letmebingthatforyou.com/scripts/lmbtfy.jsがほとんどの作業を行っているようです。

于 2013-02-05T18:25:01.810 に答える
0

からタグを削除するにはe、次を使用します。

e = $(e).text();

これは、最初から e に HTML が含まれていることがわかっていることを前提としています。プレーン テキストが含まれている可能性がある場合は、最初に DIV でラップします。

e = $('<div>'+e+'</div>').text();

それ以外の場合、jQuery はそれをセレクターとして解釈しようとします。

于 2013-02-05T18:25:11.920 に答える