首 页IT知识库翔宇问吧收藏本站
当前位置:翔宇亭IT乐园IT知识库WEBJavascript

js类库dynamic使用方法简介

减小字体 增大字体 作者:biye5u.com  来源:本站原创  发布时间:2013-07-14 11:31:21

dynamic(dynamo)js类库可以帮助你快速简单的创建动态HTMLbits,可以为你的网页内容添加精巧的效果。使用它可以使你的内容更加引起人的注意。

其使用方法如下:

如果想使用本js类库,你需要进行简单的设置,将你的内容放进一个标签容器中,然后指定需要轮回效果的文本行,并且调用引擎:$('#target').dynamo(). 这个类库需要借助jQuery工作。例如:

<p>我希望我能够改变这里的文本内容。</p>

其在浏览器中仅仅显示如下的一行文本而已:

我希望我能够改变这里的文本内容。

如果稍微对其进行修改如下样子:

<p>我希望我能够<span class="dynamo" data-lines="修改,变化,变换,转换">改变</span>这里的文本。</p>

经过这样的修改后,其显示的内容中“改变”字样将在“修改,变化,变换,转换”之间进行轮回(见演示效果)。

dynamic(dynamo)js类库网站

该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/

知识评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论

用户名: 查看更多评论

分 值:100分 85分 70分 55分 40分 25分 10分 1分

内 容:

            请注意用语文明且合法,不要发布带有攻击性、侮辱性的言论,谢谢合作!

         通知管理员 验证码:

关于本站 | 网站帮助 | 广告合作 | 网站声明 | 友情连接 | 网站地图 | 用户守则 | 联系我们 |
本站大多数内容来自互联网或网站会员发布,如有侵权,请来信告之,谢谢!
Copyright © 2007-2017 biye5u.com. All Rights Reserved.
网站备案号:黑ICP备13005378号-3