溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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" href="css/reset.css" rel="external nofollow" >
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
<link rel="stylesheet" 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.jb51.net/js/2017/jquery-quoterotator-txt-cartoon-codes/。
附：完整實例代碼點擊此處本站下載。
PS：這里再為大家推薦幾款相關的特效工具供大家參考使用：
在線特效文字/彩色文字生成工具：
http://tools.jb51.net/aideddesign/colortext
在線彩虹文字/顏色漸變文字生成工具：
http://tools.jb51.net/aideddesign/txt_caihongzi
在線發光字生成工具：
http://tools.jb51.net/aideddesign/txt_faguangzi
仿古書排版文字豎排轉換工具：
http://tools.jb51.net/transcoding/shupai
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
