テキストのタイプライター

★　テキストのタイプライター


●　内容

①　指定したテキストをタイプライターの様に一文字ずつ表示します。
②　テキスト表示のスピードを指定できます。
③　テキストのタイプライター表示の回数を指定できます。


●　例

リアナのカスタマイズ日記

●　設置方法


①　フリープラグインへ下記を追加する

<script src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

<script src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>

<script type="text/javascript">

Type_w("#type01",100,5);

</script>

　■　説明

　　・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

　　　・　下記が既に設定されていれば、不要です。

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>



●　当スクリプトの内容

・　Type_w("#type01",100,5);

　　　"#type01"・・・セレクタ名
　　　100・・・タイプライターの表示時間（１文字）
　　　5・・・繰り返し回数



②　設置したい場所へ下記を追加する。
　　記事、メッセージボード、フリースペースなど

<div id="type01">文章</div>

③　下記をＣＳＳの一番下に追加する。
　　不要な行は消してください。

#type01{

display:none;   /* 最初は表示しない */

font-size:18px; /* 文字の大きさ     */

color:#ff0000;  /* 文字の色 */

}

●　Javascript ソース内容

//

// タイプライター表示(Type_w)

// Type_w(セレクタ名,表示スピード,繰り返し回数);

//

function Type_w(selctor_name,speeds_time,loop_cnt){

 $(document).ready(function(){

 $(selctor_name).each(function() {

 var $ele=$(this), str=$ele.text()+" ";

 $ele.css("display","inline");

 $ele.text('');

 var w_counters=0,loop_cntw=2;

 var timer = setInterval(function() {

  $ele.text(str.substring(0, w_counters++));

   if (w_counters > str.length){

    if (loop_cnt >= loop_cntw){

      $ele.text('');loop_cntw++;w_counters=0;

    }else{

     clearInterval(timer);

    }

   }

  }, speeds_time);

});

});

}