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)