使用JavaScript的HTML打字机效果

Question

我想要执行以下操作：我想在HTML / JavaScript（jQuery / jQuery UI，如果需要）中使用打字机效果。关于如何在字符串上创建打字机效果（例如this one），有很多很好的例子。我想做类似的事情，但是有一个完整的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, here上有一个很棒的插件。 README的一个例子如下：

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

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

Answer 3

我会转发你使用它的旧网站设计。

myWebsiteImplementsThis

它使用了jTypeWriter.js，blink.js和jquery。

在源代码中，您将获得代码。

您需要查看function start()

这将启动登录设计。我实际上把它放在了中断位置，因为IRL我实际上有一些小问题，但你至少可以轻松看到一个有效的例子：）

代码：

$(function(){
    start();
});
function start(){ 
    $("#start").show(); 
    setTimeout(ssh,1000);
}
function ssh(){
    $("#ssh").show().jTypeWriter({duration:2.5}); 
    setTimeout(pass,3000);
}
function pass(){
    $("#pass").show(); 
    setTimeout(...,2500);
}
/* etc etc */

标记：

<pre id="start" style="display:none;">localhost$ <span id="ssh" style="display:none;">ssh fallenreaper@www.fallerneaper.com</span></pre>