• <em id="ommgs"></em>
    <dd id="ommgs"><center id="ommgs"></center></dd>

    1. <em id="ommgs"><acronym id="ommgs"><u id="ommgs"></u></acronym></em>
      首 页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分 90分 80分 70分 60分 40分 20分

      内 容:

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

      验证码:

      关于本站 | 网站帮助 | 广告合作 | 网站声明 | 友情连接 | 网站地图 | 用户守则 | 联系我们
      本站部分内容来自互联网,如有侵权,请来信告之,谢谢!
      Copyright © 2007-2019 biye5u.com. All Rights Reserved.
      网站备案号:黑ICP备13005378号-3
      japanese日本熟妇photo