Textualizer 是一个简单易用的轻量级 jQuery 插件,经压缩后只有4kb大小,使用此插件你可以打造出很漂亮的文字动画效果。此插件可对任意数量的句子进行旋转、变换等动画效果,同时你也能设置 fadeIn、slideLeft、slideTop 三种效果。最重要的是它支持包括 IE6 在内的多种浏览器。
首先在 HTML 页面的 HEAD 中添加 jQuery 框架和 Textualizer 插件
<script src="jquery-1.6.2.min.js"></script>
<script src="textualizer.min.js"></script>
添加呈现动画效果的 HTML 代码
<div id="txtlzr"></div>
初始化文字动画
var list = ['给力技术','演示'];
var txt = $('#txtlzr');
txt.textualizer(list);
txt.textualizer('start');
初始化时的可选参数说明
duration: 每段句子在页面中的停留时间(ms)
rearrangeDuration: 单词切换间隔时间(ms)
effect: 显示的动画效果:random, fadeIn, slideLeft, slideTop