当前位置 博文首页 > 文章内容

    animatext.js使用介绍

    作者: 栏目:未分类 时间:2020-09-16 11:00:08

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    animatext.js文档

    animatext是一款简单的jquery文字动画特效插件。通过该jquery文字动画插件,你可以在显示一串文字时,添加多种炫酷的动画效果。

    使用方法
    在页面中引入jquery和animatext.min.js文件,如果需要额外的动画效果,可以添加animate.min.css动画库。

    <link rel="stylesheet" href="css/animate.min.css" type="text/css" />
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/animatext.min.js"></script>
    

      

    HTML结构
    你可以为任意标题文字,段落文字添加文字动画特效。例如:

    <h3 class="demo">青春,人生当中最美好的时光,不知不觉就会逝去,正因如此,我们才更加感怀青春。</h3>
    

      


    初始化插件
    在页面DOM元素加载完毕之后,可以通过animatext()方法来初始化该jquery文字动画特效插件。

    $(".demo").animatext();
    

      


    配置参数
    文字的显示分为单词和字母两种模式:

    // 字母模式
    $(".demo").animatext({
      mode: "chars"
    });
    // 单词模式
    $(".demo").animatext({
      mode: "words"
    });
    //可以通过reverse参数设置反向显示。
    $(".demo").animatext({
      reverse: true
    });
    //可以通过infinite参数设置无限循环显示。
    $(".demo").animatext({
      infinite: true
    });
    //可以通过speed参数设置文字动画的速度。
    $(".demo").animatext({
      speed: 150
    });
    //你还可以通过group参数来对文字进行分组。
    $(".demo").animatext({
      group: true
    });
    //可以通过random参数来设置随机显示文字。
    $(".demo").animatext({
      random: true
    });
    //initDelay参数用于设置显示文字的延迟时间。
    $(".demo").animatext({
      initDelay: 0
    });
    //timeToRelaunch参数用于设置两次循环文字动画之间的延迟时间。
    $(".demo").animatext({
      timeToRelaunch: 2000
    });
    

      


    最后,还有两个可用的回调函数。

    $(".demo").animatext({
      onBegin: function() {},
      onSuccess: function() {}
    });
    

      

    animatext jquery文字动画特效插件的github地址为:https://github.com/oscarlijo/animatext
    示例地址:http://www.oscarlijo.com/animatext/