js類庫dynamic使用方法簡介

dynamic(dynamo)js類庫可以幫助你快速簡單的創建動態HTMLbits，可以為你的網頁內容添加精巧的效果。使用它可以使你的內容更加引起人的注意。

其使用方法如下：

如果想使用本js類庫，你需要進行簡單的設置，將你的內容放進一個標簽容器中，然后指定需要輪回效果的文本行，并且調用引擎：$('#target').dynamo(). 這個類庫需要借助jQuery工作。例如：

<p>我希望我能夠改變這里的文本內容。</p>

其在瀏覽器中僅僅顯示如下的一行文本而已：

我希望我能夠改變這里的文本內容。

如果稍微對其進行修改如下樣子：

<p>我希望我能夠<span class="dynamo" data-lines="修改,變化,變換,轉換">改變</span>這里的文本。</p>

經過這樣的修改后，其顯示的內容中“改變”字樣將在“修改，變化，變換，轉換”之間進行輪回（見演示效果）。

該js類庫還可以通過鼠標單擊事件實現在若干文本內容之間進行輪換。

如下面的設置：

<p><span id="manual_example" class="dynamo" data-pause="true" data-lines="[click again!],[and again!],[once more!]">[click here!]</span></p>

要實現鼠標單擊輪回，還需要在HTML文檔中添加如下代碼：

<script type="text/javascript">
  $('#manual_example').click(function() {
    $(this).dynamo_trigger();
  });
</script>

最后，要想該js類庫工作還需添加如下代碼：

<script type="text/javascript">
$(function() {
  $('.dynamo').dynamo();
});
</script>

dynamic js控件的一些設置選項：

（1）data-lines: 用來設置輪回的文本（文本間需要用逗號（英文半角）隔開，輪回文本中不要再出現原文本。

（2）data-speed: 文本轉換的速率(默認為 350ms)

（3）data-delay: 每個循環之間的延遲時間 (默認為3000ms)

（4）data-center: 是否使效果容器標簽（dynamo container）中的文本居中(默認為: false)

（5）data-delimiter: 用來設置用于分隔輪換字符或字符串的分隔符(默認為: ,（逗號）)

（6）data-pause: 設置效果引擎，但不自動輪換（默認為: false)

本文案例效果演示

官方網站：http://jordanscales.com/dynamo/