jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017-03-24 11:26
1161 查看
演示效果图如下:
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://demo.jb51.net/js/2017/jquery-quoterotator-txt-cartoon-codes/。
附:完整实例代码点击此处本站下载。
PS:这里再为大家推荐几款相关的特效工具供大家参考使用:
在线特效文字/彩色文字生成工具:
http://tools.jb51.net/aideddesign/colortext
在线彩虹文字/颜色渐变文字生成工具:
http://tools.jb51.net/aideddesign/txt_caihongzi
在线发光字生成工具:
http://tools.jb51.net/aideddesign/txt_faguangzi
仿古书排版文字竖排转换工具:
http://tools.jb51.net/transcoding/shupai
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
- jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
- jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery实现的超链接提示效果示例【附demo源码下载】
- jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
- jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
- jQuery flip插件实现的翻牌效果示例【附demo源码下载】
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
- jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
- jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
- jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
- jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
- jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
- jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
- jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)