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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
JQuery animate动画应用示例
May 14 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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编程开发“虚拟域名”系统
2006/10/09 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
div层的移动及性能优化
2010/11/16 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
javascript 节点排序 2
2011/01/31 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
老师推荐信
2013/10/28 职场文书
商场活动策划方案
2014/01/24 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
餐厅开业活动方案
2019/07/08 职场文书