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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现电梯导航模块
Dec 22 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
探讨php中header的用法详解
2013/06/07 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python自定义异常实例详解
2017/07/11 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python如何发布程序的详细教程
2018/10/09 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python视频按帧截取图片工具
2019/07/23 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python代码如何注释
2020/06/01 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
节约用水标语
2014/06/11 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers