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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现简单全选框
Sep 13 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Javascript - HTML的request类
2007/01/09 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
python批量赋值操作实例
2018/10/22 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
股东协议书范本
2014/04/14 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
给上级领导的感谢信
2015/01/22 职场文书
公司行政助理岗位职责
2015/04/11 职场文书