jQuery 타이핑 효과 구현 방법(데모 소스 코드 다운로드 포함)

jQuery 타이핑 효과 구현 방법(데모 소스 코드 다운로드 포함)_jquery

WBOY

풀어 주다： 2016-05-16 15:24:42

원래의

1377명이 탐색했습니다.

이 글의 예시에서는 jQuery 타이핑 효과를 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모를 보려면 여기를 클릭하세요.

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(c35?String.fromCharCode(c 29):c. toString(36 ))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k =[함수 (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"; 3h(n,o){2(n>=o)?h(n-o,o):((n=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| bin|true |this|fn|children|extend|readout|elem|each|remove|makeArray|html|setTimeout|null|slice|defaults|ticker|currentItem|item|2000|play|_|control|break|for| charAt|이전 |class|200|eq|40|splice|typeof|jQuery|appendTo|span|stop|clone|append|object'.split('|'),0,{}))

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.