当前位置: 首页 > 工具软件 > Textualizer > 使用案例 >

jQuery插件打造漂亮文字动画效果 - Textualizer

周承天
2023-12-01

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

 类似资料: