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

Question

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

我想要做的就是，不是使用 strings 数组插入字符串，而是在页面上放置一个 HTML div 并从中读取。这样机器人和搜索引擎以及禁用 JavaScript 的用户就可以看到页面上的文本。

<div id="text1">

  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>

</div>

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

<script>
$(function(){
    $("#typed").typed({
        stringsElement: $('#text1')
        typeSpeed: 50
    });
}); </script>

我也不明白span是干什么用的

Answer 1

你可以做的是使用 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

Answer 2

一个问题可能是您没有最新版本的 Typed.js。尽管版本 1.1.1 是 cdnjs.com and in Bower, the code on GitHub has been updated since then, but not published. The stringsElement feature described in the latest README only works with the latest code in the repo, not the published version 1.1.1. Other users noticed this problem too.

上可用的最新版本

此外，您需要通过在 $('#text1') 后添加逗号来修复语法错误。在 JavaScript 对象字面量 {} 中，除了最后一个 key: value 对之外，每个 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>，而是使用一个 <p>，其中包含许多由 <br> 分隔的行。这样做的效果是插件永远不会在每一行上退格，而是一次写入它们。如果这不是您想要的，请使用 README 中的格式。

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

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

Typed.js / strings from static HTML (SEO Friendly)

html

javascript

jquery

typed.js