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 弹出层插件实现代码
Oct 24 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
Python实现发送email的几种常用方法
2014/08/18 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python 实现的车牌识别项目
2021/01/25 Python
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
服装采购员岗位职责
2014/03/15 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
辞职离别感言
2015/08/04 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
MySQL数据库事务的四大特性
2022/04/20 MySQL
Python开发五子棋小游戏
2022/05/02 Python