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 22 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery插件实现搜索历史
Apr 24 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版(5)
2006/10/09 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
用Python实现KNN分类算法
2017/12/22 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python reverse反转部分数组的实例
2018/12/13 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python assert关键字原理及实例解析
2019/12/13 Python
使用python实现飞机大战游戏
2020/03/23 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
保险专业大专生求职信
2013/10/26 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
廉洁校园实施方案
2014/05/25 职场文书
霸气队列口号
2014/06/18 职场文书
2014年团委工作总结
2014/11/13 职场文书
2014年药店工作总结
2014/11/20 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers