Question

我试图提供一种简单的方法来获得打字文本效果，但也可以允许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节点的情况下跳过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/

更新

Got it!

example没有jQuery的动画功能。

如果您有任何改进，请在此处分享！

Answer 1

有点像“让我为你做那个！”的确如此吗？ Example

可以下载执行输入效果的Javascript - 但请先检查许可条款。 http://letmebingthatforyou.com/scripts/lmbtfy.js似乎正在完成大部分工作。

Answer 2

要从e中删除代码，请使用：

e = $(e).text();

这假设e已知包含HTML开头。如果它可能包含纯文本，请先将其包装在DIV中：

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

否则，jQuery会尝试将其解释为选择器。

使用格式键入文本效果：跳过HTML标记，但不要删除

2 个答案: