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实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery实现简单拖拽效果
Jul 20 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
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php注册登录系统简化版
2020/12/28 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python3字符串学习教程
2015/08/20 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
linux面试题参考答案(11)
2016/11/26 面试题
初入社会应届生求职信
2013/11/18 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
新党员入党决心书
2015/09/22 职场文书
Python 正则模块详情
2021/11/02 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android