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 相关文章推荐
json 定义
Jun 10 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JS实现留言板功能
2017/06/17 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python实现点对点聊天程序
2018/07/28 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
中年人生感言
2014/02/04 职场文书
企业文化演讲稿
2014/05/20 职场文书
助学贷款贫困证明
2014/09/23 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL