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 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
PHP循环结构实例讲解
2014/02/10 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python元组知识点总结
2019/02/18 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python之生成多层json结构的实现
2020/02/27 Python
关于python中的xpath解析定位
2020/03/06 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
如何利用python读取micaps文件详解
2020/10/18 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
团队口号大全
2014/06/06 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
PyTorch 如何自动计算梯度
2021/05/23 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS