当前位置: 代码迷 >> Web前端 >> jQuery插件制造漂亮文字动画效果 - Textualizer
  详细解决方案

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

热度:36   发布时间:2012-09-01 09:33:03.0
jQuery插件打造漂亮文字动画效果 - Textualizer

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

  相关解决方案