jQuery打字效果实现方法(附demo源码下载)


Posted in Javascript onDecember 18, 2015

本文实例讲述了jQuery打字效果实现方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery打字效果实现方法(附demo源码下载)

点击此处查看在线演示效果。

1.前台页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>无标题页</title>
 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="jticker_split.js"></script>
 <script type="text/javascript">
 $(function(){
  $("#ticker").ticker({
    cursorList: " ",
    rate: 100,
    delay: 4000
   }).trigger("play").trigger("stop");
 });
 </script>
</head>
<body>
 <div id="ticker" style="height: 200px; width: 500px; border: solid 1px #cccccc;">
 <div>
  <h3>
  1.1 RIA与Flex</h3>
  <p>
  当下非常流行一个名词叫RIA,RIA全称是Rich Internet Application,翻译成中文为丰富互联网应用程序。RIA 是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本布署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。目前WEB领域和桌面软件领域正逐步向RIA靠拢,预计3、5年后RIA的时代将会完全到来。</p>
 </div>
 </div>
</body>
</html>

2.jticker_split.js脚本代码:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(m){5 b="Z";3 h(n,o){2(n>=o)?h(n-o,o):((n<0)?h(n+o,o):n)}3 k(p){5 q=p.u(b);5 o;17(5 n=0;n<1b;n++){4(!q.F[n]){o=n;16}}q.v=h((q.v||0),o);q.10=q.v;q.y=[q.10];q.D=0;q.v++}3 l(o){5 p={Q:o.1k().G()};5 n=o.N();4(n.7){n.R(3(q){p[q]=l(m(L))});2 p}6{p.x=o.x();2 p}}3 e(p,n){5 o;4(p[n[0]]){4(p[n[0]].x){2 p[n[0]]}6{4(n.7==1){2 K}6{o=m.T(n);2 e(p[o[0]],o.1e(1,o.7))}}}6{2 8}}3 d(n){4(n.7>1){n[n.7-1]++;2 n}6{2 8}}3 g(o,n){4(n===8){2 8}5 p=e(o,n);4(p===8){2 g(o,d(n.X(0,n.7-1)))}6{4(p===K){n[n.7]=0;2 g(o,n)}6{2 n}}}3 c(r,q,n,s){5 p,o;5 t=r.N().1c(n[0]);4(!n.7){2{P:r,x:q.x}}6{4(t.7){o=t}6{o=q[n[0]].Q.1h(r)}}p=m.T(n).X(1,n.7);2 c(o,q[n[0]],p,s)}3 i(n){5 o=n.u(b);m("*",n).G();n.G();o.H=0;o.E=0;4(o.w){w=0}}3 a(n){5 o=n.u(b);o.H=o.E}3 j(q,n,r){5 o,p;4(r.w!==8){r.w=h(r.w+1,r.z.7);r.9.U(r.z[r.w])}6{r.9.U(r.z)}o=r.D-r.H;p=r.x.18(o-1);r.9.19(p);4(r.D>=r.E){r.9.S();r.y=d(r.y);2 f(q,n)}6{2 V(3(){4(r.B==n){r.D++;j(q,n,r)}n=W},r.A)}}3 f(o,n){5 p=o.u(b);4(p.B==n){p.y=g(p.F,p.y);4(p.y===8){2 V(3(){4(p.I&&(p.B==n)){k(o);2 f(o,n)}n=W},p.C)}6{4(!p.D){i(o)}6{a(o)}}m.O(p,c(o,p.F,p.y));p.E=p.E+p.x.7;p.P.1l(p.9);2 j(o,n,p)}}m.M[b]=3(n){5 p=m.O({},m.M.Z.Y,n);2 L.R(3(){5 o=m(L);o.u(b,{A:p.A,C:p.C,F:l(o),9:p.9,z:p.z,w:(1f(p.z)=="1m")?0:8,v:0,B:0}).J("1j",3(r){5 q=o.u(b);q.I=8}).J("13",3(r){5 q=o.u(b);q.B++;q.I=K;q.v=(r.11||q.v);k(o);f(o,q.B)}).J("15",3(r){5 q=o.u(b);m().O(q,{v:r.11,A:r.A,C:r.C})}).N().S()})};m.M[b].Y={A:1d,C:12,z:"14",9:m(\'<1i 1a="9" />\')}})(1g);',62,85,'||return|function|if|var|else|length|false|cursor|||||||||||||||||||||data|nextItem|cursorIndex|text|elemIndex|cursorList|rate|eventIndex|delay|charIndex|sum|content|empty|start|running|bind|true|this|fn|children|extend|readout|elem|each|remove|makeArray|html|setTimeout|null|slice|defaults|ticker|currentItem|item|2000|play|_|control|break|for|charAt|before|class|200|eq|40|splice|typeof|jQuery|appendTo|span|stop|clone|append|object'.split('|'),0,{}))

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 #Javascript
jquery简单倒计时实现方法
Dec 18 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php经典算法集锦
2015/11/14 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
puppeteer库入门初探
2019/01/09 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python时间的精准正则匹配方法分析
2017/08/17 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
财务会计专业推荐信
2013/11/30 职场文书
土地转让协议书
2014/04/15 职场文书
房地产项目合作意向书
2015/05/08 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫