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' 动画功能的示例。

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

4

2 回答 2

0

有点像“让我为你准备那个！” 做？例子

可以下载执行打字效果的 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 回答