jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】

本文實例講述了jQuery實現(xiàn)的動態(tài)文字變化輸出效果。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的孝南網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

演示效果圖如下：

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制作動態(tài)文字變化輸出效果</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&#39;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&#39;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：這里再為大家推薦幾款相關(guān)的特效工具供大家參考使用：

在線特效文字/彩色文字生成工具：
http://tools.jb51.net/aideddesign/colortext

在線彩虹文字/顏色漸變文字生成工具：
http://tools.jb51.net/aideddesign/txt_caihongzi

在線發(fā)光字生成工具：
http://tools.jb51.net/aideddesign/txt_faguangzi

仿古書排版文字豎排轉(zhuǎn)換工具：
http://tools.jb51.net/transcoding/shupai

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

網(wǎng)頁標(biāo)題：jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】
當(dāng)前網(wǎng)址：http://www.rwnh.cn/article48/gpoohp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、虛擬主機(jī)、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】