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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python中round函数保留两位小数的方法
2020/12/04 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
小学数学课题方案
2014/06/15 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
怎样写辞职信
2015/02/27 职场文书
暑期实践个人总结
2015/03/06 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python