jQuery文字动画特效插件

当前位置:主页 > jQuery库 > 文本和超链接 > jQuery文字动画特效插件
jQuery文字动画特效插件
分享:

    插件介绍

    这是一款jQuery文字动画特效插件。该jquery文字动画插件结合animate.css一起使用,可以制作出各种炫酷的文字动画特效。

    浏览器兼容性

    浏览器兼容性
    时间:09-20
    阅读:
简要教程

这是一款jQuery文字动画特效插件。该jquery文字动画插件结合animate.css一起使用,可以制作出各种炫酷的文字动画特效。

使用方法

在页面中引入animate.css和rotator.css文件,以及jquery和jquery.rotator.js文件。

<link href="css/animate.css" rel="stylesheet"> 
<link href="css/rotator.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/jquery.rotator.js"></script>             
                
HTML

基本的HTML结果如下:

<div id="example1" class="rotate" data-rotate-interval="3000" data-rotate-animate="zoomIn,zoomOut">
                      
    <h1>Welcome to <span class="rotate-arena"></span></h1>
                          
    <ul>
       <li>text totate 2</li>
       <li>text totate 3</li>
       <li>text totate 4</li>
       <li>text totate 5</li>
    </ul>
                          
</div>
                
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery文字动画插件。

$(".rotate").rotator();                   
                

该jquery文字动画插件的github地址为:https://github.com/ht2pl/rotator