使用JavaScript的HTML打字机效果

Question

我想做以下事情:我希望在HTML/JavaScript(jQuery/jQuery UI,如果需要)中使用打字机效果.关于如何在字符串上创建打字机效果(例如这个),有很多很好的例子.我想做类似的事情,但是有一个完整的HTML字符串,不应该输出,而是正确插入到网页中.

示例字符串:

<p>This is my <span style='color:red;'>special string</span> with an <img src="test.png"/> image !</p>

应使用打字机动画键入此字符串.即使在打字时,"特殊字符串"的颜色也应为红色,图像应出现在单词"an"之后和单词"image"之前.解决方案的问题在于它们将逐个字符的标记插入到网页中,这导致在本示例中键入"特殊字符串"时未关闭.我考虑用jQuery解析字符串并迭代数组,但我不知道如何处理嵌套标记(如本例中的p和span)

Answer 1

我认为你真的不需要一个插件来做这个东西,我做了一个简单的例子:

HTML:

 <div id="typewriter"></div>

JS:

var str = "<p>This is my <span style='color:red;'>special string</span> with an <img src='http://placehold.it/150x150'> image !</p>",
    i = 0,
    isTag,
    text;

(function type() {
    text = str.slice(0, ++i);
    if (text === str) return;

    document.getElementById('typewriter').innerHTML = text;

    var char = text.slice(-1);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, 80);
}());

这是jsfiddle的演示

Answer 2

Github上有一个很棒的插件,在这里.README的一个例子如下:

它很好并且可配置,具体取决于您希望输出的人性化程度.一个简单的例子如下:

var tw = typewriter($('.whatever')[0]).withAccuracy(90)
                                     .withMinimumSpeed(5)
                                     .withMaximumSpeed(10)
                                     .build();