靜態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