2012年11月12日

javascript ウェーブする文字列

スポンサード リンク

 テキストを表示するときウェーブさせます。

ようこそ サンプル集へ

 文字のサイズを少しずつ変更(縮小、拡大)して一文字ずつ表示しています。
このサンプルは、ウェーブ文字列を三回繰り返し表示を行い
文字色を変更しています。テキストを注目させたいときに利用するといいですね!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
  <title>javascript ウェーブする文字列</title>
<style type="text/css">
<!--
  #moji{
    border:double 3px #760014;
    border-width:3px 0px;
    padding:5px;
    font-family :HGS創英角ポップ体;
    font-size : 26px;
    color : purple;
  }
-->
</style>

<script language="JavaScript">
<!--javascript123

            //ウェーブ させるテキスト。
var msg="ようこそ サンプル集へ。文字が ウェーブします。    ";

var clr = new Array("red", "lime", "navy");//文字色
var flag=true;
var Fsize=26; // 最初のフォントサイズ。
var v=Fsize;  // フォントサイズの変数。
var dspN=3;   // 文字列表示繰り返し回数。
var dsp=0;    // 文字列表示回数カウント。

var i = 0;  // 文字列msg の取り出す文字位置。 
var tag="";
var syuki = 5; // ウェーブの周期。
var cnt=0;  // syukiのカウント。

function wave(){
 tag=tag+"<span style='font-size:"+v+"px; color :"+clr[dsp]+"';>"
  +msg.charAt(i)+"</span>";
   Tbox=document.getElementById("moji");
    Tbox.innerHTML =tag;

i++;
cnt++;
cnt = cnt % syuki;  // 剰余算演算子:cntをsyukiで割った余り。
  if(flag){v=v-2;} // フォントサイズ変更:小さく。
   else{v=v+2;} // 大きく。

if(i>msg.length){ // msg の文字数。ウェーブ表示が終わったら。
 tag="";
 i=0;
 cnt=0;
 v=Fsize;
 flag=false;
 dsp++;

if(dsp==dspN){ //ウェーブ表示の繰り返し回数に達したら。
 End();return }
  }

if(cnt==0){
 flag=!flag; // true と false の切り替え, ! 否定演算子。
  }

Timer=setTimeout("wave()",200);
    }

function End(){ //テキスト、ウェーブ表示終了。
 tag="";  //全て表示されたら、空文字に戻す
 cnt=0;
 v=Fsize;
 dsp=0;
 flag=true;
      clearTimeout(Timer);
   }
// -->
</script>

</head>
<body>
<div>
 <div id="moji">ようこそ サンプル集へ</div>
  <form><input type="button" onclick="wave()" value="スタート"></form>
</div>
</body>
</html>
obj.charAt()メソッド
指定したテキストから1文字取り出します。
var msg="指定した テキスト";
msg.charAt(i); //i が "1" の場合 "定" になります。
msg.charAt(取り出す文字位置) は "0" から数えます。

0 1 2 3 4 5 6 7 8

こうして取り出した文字に対して、変数 v でフォントサイズを指定します。
これをTimer=setTimeout("wave()",200);で繰り返します。
Timer=setTimeout("wave()",200);
タイマーID=setTimeout("処理関数", 時間) : //時間はミリ秒(1000分の1秒)
指定した時間が経過すると処理関数を実行します。
戻り値としてタイマーIDが返されます。設定したタイマーをクリアするには
clearTimeout()のパラメータにタイマーIDを設定します。
clearTimeout(Timer);
setTimeout() メソッドの処理を停止するメソッド。
setTimeout()の設定で、「タイマーID=setTimeout(処理関数,時間)」としておくと、
そのタイマーIDを clearTimeout メソッドに指定することで、// clearTimeout(タイマーID)
設定したタイマーID名の setTimeout() の処理を中止することができます。
剰余算演算子
a % b、aをbで割った余りを算出します。
%
cnt=0; syuki=5; cnt++; cnt = cnt % syuki; ならば
cntは"1"ずつ増えていき、syukiの値"5"に達したら"0"になります。5%5=0;
上記 左側のボックスの値を"1"ずつ増やして計算してください。
"5"になれば余りは"0"になります。
これを利用してcnt==0;なら flag=!flag; で true と false を切り替え
true ならフォントサイズを小さく、false なら大きくしています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
JavaScript setTimeout , clearTimeout
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
文字列から1文字取り出します。charAt()メソッド
文字のサイズを変更
文字列の長さ(文字数)を取り出す。 length プロパティ

 テキストを表示するときウェーブさせます。

ようこそ サンプル集へ

 文字のサイズを少しずつ変更(縮小、拡大)して一文字ずつ表示しています。
このサンプルは、ウェーブ文字列を三回繰り返し表示を行い
文字色を変更しています。テキストを注目させたいときに利用するといいですね!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
  <title>javascript ウェーブする文字列</title>
<style type="text/css">
<!--
  #moji{
    border:double 3px #760014;
    border-width:3px 0px;
    padding:5px;
    font-family :HGS創英角ポップ体;
    font-size : 26px;
    color : purple;
  }
-->
</style>

<script language="JavaScript">
<!--javascript123

            //ウェーブ させるテキスト。
var msg="ようこそ サンプル集へ。文字が ウェーブします。    ";

var clr = new Array("red", "lime", "navy");//文字色
var flag=true;
var Fsize=26; // 最初のフォントサイズ。
var v=Fsize;  // フォントサイズの変数。
var dspN=3;   // 文字列表示繰り返し回数。
var dsp=0;    // 文字列表示回数カウント。

var i = 0;  // 文字列msg の取り出す文字位置。 
var tag="";
var syuki = 5; // ウェーブの周期。
var cnt=0;  // syukiのカウント。

function wave(){
 tag=tag+"<span style='font-size:"+v+"px; color :"+clr[dsp]+"';>"
  +msg.charAt(i)+"</span>";
   Tbox=document.getElementById("moji");
    Tbox.innerHTML =tag;

i++;
cnt++;
cnt = cnt % syuki;  // 剰余算演算子:cntをsyukiで割った余り。
  if(flag){v=v-2;} // フォントサイズ変更:小さく。
   else{v=v+2;} // 大きく。

if(i>msg.length){ // msg の文字数。ウェーブ表示が終わったら。
 tag="";
 i=0;
 cnt=0;
 v=Fsize;
 flag=false;
 dsp++;

if(dsp==dspN){ //ウェーブ表示の繰り返し回数に達したら。
 End();return }
  }

if(cnt==0){
 flag=!flag; // true と false の切り替え, ! 否定演算子。
  }

Timer=setTimeout("wave()",200);
    }

function End(){ //テキスト、ウェーブ表示終了。
 tag="";  //全て表示されたら、空文字に戻す
 cnt=0;
 v=Fsize;
 dsp=0;
 flag=true;
      clearTimeout(Timer);
   }
// -->
</script>

</head>
<body>
<div>
 <div id="moji">ようこそ サンプル集へ</div>
  <form><input type="button" onclick="wave()" value="スタート"></form>
</div>
</body>
</html>
obj.charAt()メソッド
指定したテキストから1文字取り出します。
var msg="指定した テキスト";
msg.charAt(i); //i が "1" の場合 "定" になります。
msg.charAt(取り出す文字位置) は "0" から数えます。

0 1 2 3 4 5 6 7 8

こうして取り出した文字に対して、変数 v でフォントサイズを指定します。
これをTimer=setTimeout("wave()",200);で繰り返します。
Timer=setTimeout("wave()",200);
タイマーID=setTimeout("処理関数", 時間) : //時間はミリ秒(1000分の1秒)
指定した時間が経過すると処理関数を実行します。
戻り値としてタイマーIDが返されます。設定したタイマーをクリアするには
clearTimeout()のパラメータにタイマーIDを設定します。
clearTimeout(Timer);
setTimeout() メソッドの処理を停止するメソッド。
setTimeout()の設定で、「タイマーID=setTimeout(処理関数,時間)」としておくと、
そのタイマーIDを clearTimeout メソッドに指定することで、// clearTimeout(タイマーID)
設定したタイマーID名の setTimeout() の処理を中止することができます。
剰余算演算子
a % b、aをbで割った余りを算出します。
%
cnt=0; syuki=5; cnt++; cnt = cnt % syuki; ならば
cntは"1"ずつ増えていき、syukiの値"5"に達したら"0"になります。5%5=0;
上記 左側のボックスの値を"1"ずつ増やして計算してください。
"5"になれば余りは"0"になります。
これを利用してcnt==0;なら flag=!flag; で true と false を切り替え
true ならフォントサイズを小さく、false なら大きくしています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
JavaScript setTimeout , clearTimeout
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
文字列から1文字取り出します。charAt()メソッド
文字のサイズを変更
文字列の長さ(文字数)を取り出す。 length プロパティ



posted by javaScript at 15:50 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。