树缝里也漏着一两点路灯光，没精打彩的，是渴睡人的眼。春尚浅，几处山顶上的梅花却挣扎着吐出红苞来。微风柔和地吹，柔和地爱抚我的面孔。荷塘里的荷花都羞涩地打着朵。落叶随着风高低起舞。
本文实例讲述了jQuery实现的动态文字变化输出效果。分享给大家供大家参考，具体如下：
演示效果图如下：
1、完整实例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery制作动态文字变化输出效果</title>
<link rel="stylesheet" rel="nofollow noopener noreferrer" href="css/reset.css" rel="external nofollow" >
<link rel="stylesheet" rel="nofollow noopener noreferrer" href="css/style.css" rel="external nofollow" >
<link rel="stylesheet" rel="nofollow noopener noreferrer" href="css/animate.css" rel="external nofollow" >
<script src="js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.quoterotator.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$('#words').quoteRotator();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="words">
<ul class="word-container">
<li data-author="--- Morrie Schwartz" data-easeout="lightSpeedOut">
The most important thing in life is to learn how to give out love,
and to let it come in. </li>
<li data-author="">所 有 的 瞬 间 都 会 淹 没 于 时 间 的 洪 流，就 像 泪 水 消 逝 在 雨 中。
All those moments will be lost in time, like tears in rain.</li>
<li data-author="" data-easeout="fadeOutDown">The animation can be
in random or pre-defined in the HTML. Next quote animation will be
all in fadeInDown. Optional click to next quote and hover to pause
the slideshow.</li>
<li data-author="Mark Twain (1835 - 1910)" data-easein="fadeInDown">
Always do right. This will gratify some people and astonish the
rest. </li>
<li data-author="--- Susan Rice, Stanford University Commencement, 2010" data-easeout="bounceOut">
Progress is the product of human agency. Things get better because
we make them better. Things go wrong when we get too comfortable,
when we fail to take risks or seize opportunities. </li>
<li data-author="--- Arlo Guthrie (1947 - )" data-easein="bounceIn">
You can't have a light without a dark to stick it in. </li>
<li data-author="--- Mahatma Gandhi (1869 - 1948)" data-easein="lightSpeedIn">
You must not lose faith in humanity. Humanity is an ocean; if a few
drops of the ocean are dirty, the ocean does not become dirty. </li>
<li data-author="--- Abraham Lincoln (1809 - 1865), (attributed)">
When I do good, I feel good; when I do bad, I feel bad, and that is
my religion. </li>
<li data-author="--- John Wanamaker (1838 - 1922), (attributed)">
Half the money I spend on advertising is wasted; the trouble is I
don't know which half. </li>
</ul>
<div class="quote">
<blockquote>
<p class="quote-content"></p>
</blockquote>
<cite class="quote-author"></cite>
</div>
</div>
</div>
</body>
</html>
2、在线演示地址：
http://demo.haodaima.com/js/2017/jquery-quoterotator-txt-cartoon-codes/。
附：完整实例代码点击此处本站下载。
PS：这里再为大家推荐几款相关的特效工具供大家参考使用：
在线特效文字/彩色文字生成工具：
http://tools.haodaima.com/aideddesign/colortext
在线彩虹文字/颜色渐变文字生成工具：
http://tools.haodaima.com/aideddesign/txt_caihongzi
在线发光字生成工具：
http://tools.haodaima.com/aideddesign/txt_faguangzi
仿古书排版文字竖排转换工具：
http://tools.haodaima.com/transcoding/shupai
希望本文所述对大家jQuery程序设计有所帮助。
以上就是jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】。我肩上抗着，背上背着，手里提着，都是那么重，那么大的包。浑身湿透，汗流浃背，又那么的精疲力尽，舍不得放下任何一个包，尽管自己的呼吸都感到非常困难！更多关于jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】请关注haodaima.com其它相关文章！