借助庫(kù)的幫助，如今使用 CSS 或 JavaScript 動(dòng)畫化 HTML 元素或多或少是一項(xiàng)簡(jiǎn)單的任務(wù)。但是，你只能動(dòng)畫化完整的現(xiàn)有元素。

這意味著，如果你想動(dòng)畫化段落中的單個(gè)單詞，你必須將單詞包裝在單個(gè)元素（如 span）中，然后相應(yīng)地定位它。

如果你只有這樣一兩個(gè) span 元素，這不是什么大問(wèn)題，但如果你想動(dòng)畫化段落中的每個(gè)字符呢？對(duì)于每個(gè)字符，你都必須創(chuàng)建一個(gè) span，這會(huì)添加許多額外的標(biāo)記，并使文本難以編輯。這就是 Blast.js 存在的原因。

關(guān)鍵要點(diǎn)

• Blast.js 是一個(gè) jQuery 插件，允許動(dòng)畫化 HTML 中的單個(gè)字符、單詞或句子。它通過(guò)將選定的文本包裝在單個(gè)元素（如 span）中，然后動(dòng)畫化這些元素來(lái)實(shí)現(xiàn)這一點(diǎn)。
• 該插件提供了許多自定義選項(xiàng)，包括選擇包裝元素、搜索和突出顯示特定單詞或單詞組以及控制動(dòng)畫速度和樣式的能力。它還確保文本中現(xiàn)有的元素不會(huì)被移除或損壞。
• 盡管 Blast.js 功能強(qiáng)大，但并非所有用戶都需要它，特別是那些不需要?jiǎng)赢嫽谋镜挠脩簟５?，?duì)于那些需要?jiǎng)赢嫽谋镜挠脩魜?lái)說(shuō)，它可以成為在網(wǎng)頁(yè)中添加動(dòng)態(tài)和交互元素的強(qiáng)大工具。

什么是 Blast.js？

Blast.js 是一個(gè) jQuery 插件，允許你動(dòng)畫化單個(gè)字符、單詞或句子。在本文中，我將提供一些示例，以便你可以了解如何使用 Blast.js。要使用 Blast.js 并嘗試下面的示例，你需要 jQuery 以及 Blast.js 文件，該文件可以在 Blast.js 的項(xiàng)目網(wǎng)站上找到。

如前所述，Blast.js 允許我們?cè)谧址卧~或句子周圍創(chuàng)建元素，但該庫(kù)不僅限于這些選項(xiàng)。在下一節(jié)中，我們將看到一些具體的示例來(lái)介紹一些選項(xiàng)。我們將看到的選項(xiàng)列表并非詳盡無(wú)遺；完整的可用選項(xiàng)列表可以在項(xiàng)目的網(wǎng)站上找到。

動(dòng)畫化我們的第一段文本

在這個(gè)第一個(gè)示例中，我們將動(dòng)畫化一個(gè)標(biāo)題，逐個(gè)字符地將它們向右移動(dòng)。唯一需要的 HTML 代碼如下：

<h1>></h1>Hello World!>

在包含 jQuery 和 Blast.js 之后，本部分中的下一段代碼將全部位于 jQuery 的 ready 處理程序中的自定義 JavaScript 文件中，以確保頁(yè)面已準(zhǔn)備好：

$(function() {
  // 動(dòng)畫代碼
});

現(xiàn)在我們可以動(dòng)畫化我們的標(biāo)題了。在我們的示例中，僅使用 $('h1') 來(lái)定位元素就足夠了，但在你的情況下，你將使用任何合適的選擇器來(lái)定位元素。

Blast.js 在 jQuery 對(duì)象上提供了一種新方法：.blast()，它接受一個(gè)參數(shù)：一個(gè)列出所有你想要使用的選項(xiàng)的對(duì)象。在這個(gè)第一個(gè)示例中，我們將只使用一個(gè)選項(xiàng) delimiter: 'character'，表示我們想要逐個(gè)字符地動(dòng)畫化我們的標(biāo)題。

如果我們沒(méi)有包含該參數(shù)，則將使用默認(rèn)值 'word'（而不是“character”，因此將在每個(gè)單詞（而不是每個(gè)字符，就像我們?cè)谶@里想要的那樣）周圍創(chuàng)建一個(gè) span。

<h1>></h1>Hello World!>

這樣，我們的簡(jiǎn)單 h1 元素將被動(dòng)畫化，并將生成以下 DOM：

$(function() {
  // 動(dòng)畫代碼
});

請(qǐng)注意，單詞之間的空格已被保留，并且沒(méi)有被封裝到 span 中。

現(xiàn)在，我們需要檢索生成的 span 元素。例如，你可以嘗試 $('.blast')，但是有一種更簡(jiǎn)單的方法。默認(rèn)情況下，.blast() 方法返回生成的元素，因此你只需要將它們存儲(chǔ)在一個(gè)變量中即可檢索這些元素。

$('h1').blast({
  delimiter: 'character'
});

獲取生成的元素很有用，但并非一直如此。因此，如果你希望 .blast() 方法返回父元素（你正在動(dòng)畫化的主要元素）而不是生成的元素，可以使用另一個(gè)選項(xiàng)：returnGenerated。默認(rèn)情況下，它設(shè)置為 true；將其設(shè)置為 false，你將擁有你的父元素：

<h1> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

讓我們回到我們的示例，來(lái)動(dòng)畫化我們收集的元素。我們將借助 jQuery 的 .each() 方法，逐個(gè)字符地動(dòng)畫化每個(gè)字符。

.each() 方法將為存儲(chǔ)在 jQuery 對(duì)象中的每個(gè)元素執(zhí)行一個(gè)函數(shù)。以下是我們將使用的函數(shù)，在注釋中進(jìn)行了解釋。

var chars = $('h1').blast({
  delimiter: 'character'
});

代碼解釋：首先，我們使用 $(this) 檢索當(dāng)前元素（在本例中為當(dāng)前字符）。我們將其相對(duì)位置初始化為零，最后，我們動(dòng)畫化此位置。

如代碼中相應(yīng)的注釋所示，.delay() 方法在定義的毫秒數(shù)后啟動(dòng)動(dòng)畫，使用 i * 45，其中 i 是 jQuery 提供的計(jì)數(shù)器（我們將其作為參數(shù)傳遞）。對(duì)于第一個(gè)字符，i 等于 0，因此動(dòng)畫立即啟動(dòng)，然后它等于 1，第二個(gè)字符在 45 毫秒后動(dòng)畫化，依此類推。

我們的動(dòng)畫已準(zhǔn)備就緒，并且可以運(yùn)行！你可以在下面的實(shí)時(shí)示例中查看。

選擇你的包裝元素

默認(rèn)情況下，會(huì)創(chuàng)建 span 元素，這通常是我們想要的。但有時(shí)我們想使用其他元素，例如 strong、em 甚至 div 和 p。使用 Blast.js，這是可能的。

為此，在我們的下一個(gè)示例中，我們將創(chuàng)建一個(gè)段落，其中每個(gè)單詞都將使用隨機(jī)顏色進(jìn)行樣式化并封裝在 em 元素中。

首先，我們需要一個(gè)函數(shù)來(lái)為我們提供一個(gè)隨機(jī)數(shù)。我們將使用在原生 JavaScript 中可用的修改后的 Math.random() 版本。

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

這個(gè)新函數(shù)將為我們提供 min 和 max 之間的隨機(jī)整數(shù)，這些整數(shù)作為參數(shù)傳遞到函數(shù)中。

現(xiàn)在我們準(zhǔn)備為我們的段落著色了。首先，我們使用 delimiter 'word' 動(dòng)畫化我們的段落。我們添加了一個(gè)新選項(xiàng)：tag，它允許我們指示我們希望 Blast.js 使用的標(biāo)簽來(lái)生成元素。我們將它設(shè)置為 'em'，而不是默認(rèn)的 'span'。

<h1>></h1>Hello World!>

現(xiàn)在我們所有的單詞都被封裝在 em 標(biāo)簽中了。對(duì)于每個(gè)標(biāo)簽，我們使用 jQuery 的 .css() 方法和我們的自定義 rand() 函數(shù)定義一個(gè)新的顏色：

$(function() {
  // 動(dòng)畫代碼
});

接下來(lái)，我們將添加另一行代碼來(lái)介紹如何檢索父元素的初始狀態(tài)（即如何移除所有這些額外的生成的標(biāo)簽）。

為此，你可以為 .blast() 方法賦予 false 值。這告訴 Blast.js，將移除使用此方法的先前調(diào)用添加的所有標(biāo)簽。

你可以在下面的實(shí)時(shí)版本中查看此示例。嘗試鍵入頁(yè)面上顯示的現(xiàn)有單詞之一以查看效果。

使用 Blast.js 搜索

默認(rèn)情況下，Blast.js 將在文本中的每個(gè)單詞、字符或句子周圍創(chuàng)建元素。但你也可以只定位一個(gè)單詞或一組單詞：Blast.js 然后將單詞或單詞組的每個(gè)出現(xiàn)都封裝到一個(gè)元素中。為此，我們將使用 search 選項(xiàng)，其值為字符串，而不是 delimiter 選項(xiàng)。

為了演示，我們將創(chuàng)建一個(gè)包含輸入和提交按鈕的表單。用戶將在輸入中指示要在特定段落中搜索的單詞，然后 Blast.js 將將搜索的術(shù)語(yǔ)封裝到 span 元素中。

$('h1').blast({
  delimiter: 'character'
});

我們將使用表單上的提交事件來(lái)執(zhí)行此操作。

<h1> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

指令 e.preventDefault(); 用于禁用表單的默認(rèn)行為，即提交表單。

我們?cè)诘谝淮问褂?false 值應(yīng)用 .blast() 方法之前，使用正確的選擇器檢索我們的段落。這樣，如果用戶之前執(zhí)行了其他搜索，這些搜索將被清除。

接下來(lái)，我們?cè)俅问褂?.blast() 方法，這次是搜索所需的術(shù)語(yǔ)。為此，我們使用 search 選項(xiàng)，為其提供輸入的值。另外兩個(gè)選項(xiàng)不是強(qiáng)制性的，但我希望向你展示它們的存在。

customClass 選項(xiàng)允許我們將我們自己的類名添加到生成的元素中。如果你查看了前面示例中生成的元素，你肯定會(huì)看到它們都具有 blast 類。使用 customClass，你可以添加一個(gè)或多個(gè)類。

generateIndexID 選項(xiàng)是一個(gè)布爾值。設(shè)置為 true，它將向每個(gè)生成的元素添加一個(gè) ID。要工作，它需要使用 customClass 選項(xiàng)。在這里，我們選擇了類 search，因此第一個(gè)生成的元素將具有 ID search-1，第二個(gè)元素將具有 search-2，依此類推。

為了使我們的示例有用，我們需要在 CSS 中添加一些規(guī)則來(lái)突出顯示生成的元素。例如，你可以應(yīng)用以下規(guī)則。

var chars = $('h1').blast({
  delimiter: 'character'
});

你可以在下面的實(shí)時(shí)版本中查看此示例。嘗試鍵入頁(yè)面上顯示的現(xiàn)有單詞之一以查看效果。

現(xiàn)有元素呢？

在我們了解了 Blast.js 的工作原理之后，現(xiàn)在有一個(gè)重要的問(wèn)題需要回答。由于我們將 .blast() 方法應(yīng)用于容器，如果此容器除了文本節(jié)點(diǎn)之外還包含其他元素會(huì)怎樣？例如，如果我們將爆炸應(yīng)用于以下段落會(huì)怎樣？

<h1>></h1>Hello World!>

Blast.js 不會(huì)破壞你的 DOM 樹(shù)。在這種情況下，現(xiàn)有的 span 元素不會(huì)被移除，并且會(huì)創(chuàng)建一個(gè)新的 span 元素（帶有 blast 類）。通過(guò)對(duì)上述段落執(zhí)行 $('p').blast()，我們將生成以下結(jié)果：

$(function() {
  // 動(dòng)畫代碼
});

最后：如果這個(gè)現(xiàn)有的 span 元素實(shí)際上是由 Blast.js 生成的 span 元素呢？答案取決于你想要做什么。

假設(shè)我們將 .blast() 方法應(yīng)用于一個(gè)段落，并將 delimiter 選項(xiàng)設(shè)置為 'word'，如果我們?cè)俅螒?yīng)用相同的方法，則在創(chuàng)建新元素之前，將移除先前生成的元素，即使新的調(diào)用使用搜索而不是分隔符也是如此。

但是，如果你搜索了一個(gè)術(shù)語(yǔ)，并再次調(diào)用 .blast() 方法來(lái)搜索一個(gè)新術(shù)語(yǔ)，則舊的搜索不會(huì)被移除。在我們上一部分的最后一個(gè)示例中，嘗試移除 .blast(false) 調(diào)用。在這種情況下，將突出顯示新的搜索，但舊的搜索也將保持突出顯示。

總之

Blast.js 并非對(duì)每個(gè)人都有用，有些人可能會(huì)認(rèn)為它完全沒(méi)有必要。但是，如果你想動(dòng)畫化文本，這可能是你能找到的最佳選項(xiàng)之一。

如上所述，你可以找到其他選項(xiàng)來(lái)自定義生成的元素。你甚至可以選擇禁用 ARIA 屬性。

如果你對(duì)如何以創(chuàng)造性的方式使用它有任何想法，或者如果你使用過(guò)這個(gè)或其他工具來(lái)動(dòng)畫化文本，請(qǐng)隨時(shí)在討論中告訴我們。

關(guān)于使用 Blast.js 動(dòng)畫化文本的常見(jiàn)問(wèn)題解答 (FAQ)

如何在我的項(xiàng)目中安裝 Blast.js？

要在你的項(xiàng)目中安裝 Blast.js，你可以使用 npm 或 Bower。如果你使用 npm，你可以通過(guò)運(yùn)行命令 npm install blast-text 來(lái)安裝它。如果你使用 Bower，則命令是 bower install blast-text。安裝后，你可以使用 script 標(biāo)簽將其包含在你的 HTML 文件中。記住在 Blast.js 之前包含 jQuery，因?yàn)樗且粋€(gè) jQuery 插件。

Blast.js 中有哪些不同的分隔符？

Blast.js 提供了四個(gè)不同的分隔符：character、word、sentence 和 element。character 分隔符將文本分解成單個(gè)字符。word 分隔符將文本分解成單詞。sentence 分隔符將文本分解成句子。element 分隔符將文本分解成 HTML 元素。

如何使用 Blast.js 動(dòng)畫化文本？

要使用 Blast.js 動(dòng)畫化文本，你首先需要使用 jQuery 選擇要?jiǎng)赢嫽奈谋?。然后，你可以使?.blast() 方法將文本分解成片段。之后，你可以使用 CSS 或 jQuery 來(lái)動(dòng)畫化這些片段。

我可以在沒(méi)有 jQuery 的情況下使用 Blast.js 嗎？

不可以，Blast.js 是一個(gè) jQuery 插件，因此它需要 jQuery 才能工作。你需要在包含 Blast.js 之前在你的項(xiàng)目中包含 jQuery。

如何在 Blast.js 中使用自定義分隔符？

要在 Blast.js 中使用自定義分隔符，你可以將正則表達(dá)式傳遞給 .blast() 方法。正則表達(dá)式應(yīng)該匹配你想要用作分隔符的字符。

為什么我的 Blast.js 動(dòng)畫不起作用？

如果你的 Blast.js 動(dòng)畫不起作用，可能有幾個(gè)原因。首先，確保你在你的項(xiàng)目中包含了 jQuery 和 Blast.js。其次，檢查你是否正確使用了 .blast() 方法。第三，檢查你的 CSS 或 jQuery 動(dòng)畫代碼是否正確。

我可以使用 Blast.js 動(dòng)畫化 HTML 元素嗎？

是的，你可以使用 Blast.js 動(dòng)畫化 HTML 元素。你可以使用 element 分隔符將 HTML 分解成單個(gè)元素，然后使用 CSS 或 jQuery 來(lái)動(dòng)畫化它們。

如何控制 Blast.js 動(dòng)畫的速度？

Blast.js 動(dòng)畫的速度由 CSS 或 jQuery 動(dòng)畫代碼控制，而不是由 Blast.js 本身控制。你可以通過(guò)更改動(dòng)畫代碼中的 duration 參數(shù)來(lái)調(diào)整速度。

我可以將 Blast.js 與其他 JavaScript 庫(kù)一起使用嗎？

是的，你可以將 Blast.js 與其他 JavaScript 庫(kù)一起使用。但是，由于 Blast.js 是一個(gè) jQuery 插件，你需要在你的項(xiàng)目中包含 jQuery。

如何從我的文本中移除 Blast.js 效果？

要從你的文本中移除 Blast.js 效果，你可以使用 .unblast() 方法。此方法將文本恢復(fù)到其原始狀態(tài)，移除所有 Blast.js 效果。

以上是用blast.js動(dòng)畫文字的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！