jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】


Posted in jQuery onMarch 24, 2017

本文实例讲述了jQuery实现的动态文字变化输出效果。分享给大家供大家参考,具体如下:

演示效果图如下:

jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】

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://tools.3water.com/aideddesign/txt_caihongzi

在线发光字生成工具:
http://tools.3water.com/aideddesign/txt_faguangzi

仿古书排版文字竖排转换工具:
http://tools.3water.com/transcoding/shupai

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
You might like
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python中的yield浅析
2014/06/16 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python交互式图形编程实例(三)
2017/11/17 Python
python解析xml简单示例
2019/06/21 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
营业经理岗位职责
2013/11/10 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
初婚初育证明
2014/01/14 职场文书
创业资金计划书
2014/02/06 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
送给客户微信问候语!
2019/07/04 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python