jQuery のタイピング効果を実装する方法 (デモソースコードのダウンロード付き)_jquery

WBOYオリジナル: 2016-05-16 15:24:421373ブラウズ

この記事の例では、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= [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):((n1){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('')}})(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|default|ティッカー |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 プログラミングのすべての人に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

jQuery のタイピング効果を実装する方法 (デモ ソース コードのダウンロード付き)_jquery

関連記事

jQuery のタイピング効果を実装する方法 (デモソースコードのダウンロード付き)_jquery