静态HTML Typed.js /字符串（SEO友好）

Question

现在我很努力地使用Typed.js jQuery插件。

我想要做的就是不使用strings数组插入字符串，而是在页面上放置一个HTML div并从中读取。 因此，僵尸程序和搜索引擎以及禁用JavaScript的用户可以查看页面上的文本。我也不明白span是用于什么。

Answer 1

一个问题可能是你没有最新版本Typed.js的。尽管版本1.1.1是cdnjs.com和Bower上的最新版本，但代码on GitHub已从此更新，但未发布。最新的README中描述的stringsElement功能仅适用于最新的code in the repo，而不是发布的版本1.1.1。其他用户noticed this problem too。

此外，您需要通过在$('#text1')后添加逗号来修复语法错误。在JavaScript对象文字{}中，除了最后一个对之外，每对key: value之后需要逗号。

把那两个修复在一起，你得到这个工作代码：

$(function() { 
 
    $("#typed").typed({ 
 
    stringsElement: $('#text1'), 
 
    typeSpeed: 50 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script> 
 

 

 
<div id="text1"> 
 
    <p> 
 
    Hello, 
 
    <br> 
 
    <br> 
 
    bla bla bla 
 
    <br> 
 
    <br> 
 
    bla bla bla. 
 
    </p> 
 
</div> 
 

 
<span id="typed"></span>

而且，这可能是有目的的，只是注意，您<div id="text1">从例如in the README不同的格式。而不是使用许多<p>，您使用的是包含许多由<br>分隔的行的<p>。这样做的效果是，插件不会在每一行后退，但会一次写入所有内容。如果这不是您想要的，请使用自述文件中的格式。

至于span是什么，它是页面上显示输入动画的元素。您可以在页面周围移动该span，并根据需要使用CSS进行设置。当您编写$("#typed")时，您在代码中引用了span - 选择span与id="typed"。然后你可以调用.typed()来告诉Typed.js插件将其动画文本放入该元素中。

Answer 2

你可以做的是使用DIV text1

// Working for IE and Others 
var textContent = $('#text1').innerText || $('#text1').textContent; 
// Use string for the typed.js 
$(function(){ 
    $("#typed").typed({ 
     stringsElement: textContent, 
     typeSpeed: 50 
    }); 
}); 

这应该为你工作的文本内容，你可能需要做一些额外的解析，并与内容播放，但它足够简单。

JSFiddle