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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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中将数组存到文件里的实现代码
2012/01/19 PHP
解析isset与is_null的区别
2013/08/09 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
javascript模拟命名空间
2015/04/17 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
应届大学生的推荐信
2013/11/20 职场文书
自我评价是什么
2014/01/04 职场文书
餐饮加盟计划书
2014/01/10 职场文书
公司任命书模板
2014/06/06 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014年质检工作总结
2014/11/26 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技