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 相关文章推荐
jQuery的deferred对象使用详解
Aug 20 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP基础知识介绍
2013/09/17 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
require.js的用法详解
2015/10/20 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
elementUI多选框反选的实现代码
2019/04/03 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
客户表扬信范文
2014/01/10 职场文书
文明社区申报材料
2014/08/21 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
个人收入证明格式
2015/06/24 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技
关于MySQL中explain工具的使用
2023/05/08 MySQL