功能 features
- 将以自定义分隔符分隔的各文本循环交替显示。Cycle display the text which is separated by separator.
- 循环的动画效果基于Animate.css。The cycle animation based on Animate.css.
示例 demo
文本 text
I am a Front-end developer|ASP.NET engineer.
代码 code
//init
$('#span1').cycleText();
//pause
$('#span1').cycleText('pause');
//resume
$('#span1').cycleText('resume');
使用 usage
首先在页面上引用css文件和js文件，css文件一般在<head>中添加，js文件一般在</body>之前添加。注意1.需要引入animate.css,
2.要先引用jquery，再引用插件js。
Firstly reference the css and js file of this plugin, the best location of the css reference is in <head>,
and the js is before </body>, make sure required animate.css and the plugin js should follows jQuery.
<head>
...
<!--the css for animation-->
<link rel="stylesheet" href="css/animate.css"/>
</head>
<body>
...
<!--the js for jquery-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<!--the js for this plugin-->
<script src="js/jquery.cycleText.js"></script>
</body>
然后在文本元素上执行初始化
then initialize cycleText on text element
$('#span1').cycleText(options);
参数 options
| 名称 name | 类型 type | 默认值 default | 说明 desc |
|---|---|---|---|
| separator | String | '|' |
文本之间的分隔符。 The separator of text. |
| animation | String | 'flipInX' |
循环的动画效果名称，详见Animate.css页面。 The name of cycle animation, please view Animate.css page. |
| interval | Number | 2000 |
循环的间隔时间，单位毫秒。 The cycle interval time, in milliseconds. |
方法 method
.cycleText('pause');
暂停。
pause.
$("#span1").cycleText('pause');
.cycleText('resume');
恢复。
resume.
$("#span1").cycleText('resume');