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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JavaScript布尔运算符原理使用解析
May 06 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数据缓存的使用说明
2013/05/10 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
Express的路由详解
2015/12/10 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python中__call__用法实例
2014/08/29 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
烈士陵园观后感
2015/06/08 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016年十一促销广告语
2016/01/28 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js