本日  昨日
 

03/16(Sun) 01:42

o 飛び跳ねるタイトル
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました(2003/04/27)

ページをオープンすると、文字タイトルが波打ちながら飛び跳ねるようにジャンプします。サンプルでは10個の文字を使ってますが、何文字でも使えます。文字のかわりに画像も使えます。















設置方法
使用するCross-Browser functiongetLEFT、getTOP、setTOPLEFT
スタイルシートcharpos

ヘッダー部に以下の関数を定義します。

  1. .charpos { }の中のleft:200px;top:50px----文字のスタート位置です。
  2. font-size:25px"----文字の大きさです。
  3. width:30----レイヤー幅です。文字が欠ける場合は値を大きくします。
  4. baseY----バウンドする地面の高さです。
  5. limitLeft、limitRight----バウンドする左側と右側の座標です。あなたの好みに合うように調整して下さい。
  6. moveNum----文字の個数。文字を増やしたり減らした時はこの値を変更します。この値はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
  7. サンプルの初期値のままで使えます。上記以外の初期値はあまりいじらないほうが・・・
<STYLE TYPE="text/css"> <!-- /*-------------------------------------------------------------------- Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01) --------------------------------------------------------------------*/ .charpos { position:absolute;left:200px;top:50px;font-size:25px;width:30 } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- // Cross-Browser function ------------------------------------------- // レイヤー左辺X座標ゲット function getLEFT(layName){ if(document.all) return document.all(layName).style.pixelLeft;//IE4,5,6,Opera6用 if(document.layers) return document.layers[layName].left; //NN4用 if(document.getElementById) return document.getElementById(layName).style.left;//NN6,7用 } function getTOP(layName){ if(document.all) return document.all(layName).style.pixelTop;//IE4,5,6,Opera6用 if(document.layers) return document.layers[layName].top; //NN4用 if(document.getElementById) return document.getElementById(layName).style.top;//NN6,7用 } // レイヤー左辺X座標、上辺Y座標セット function setTOPLEFT(layName,x,y){ if(document.all){ //IE4,5,6,Opera6用 document.all(layName).style.pixelLeft = x; document.all(layName).style.pixelTop = y; } if(document.layers){ //NN4用 document.layers[layName].left = x; document.layers[layName].top = y; } if(document.getElementById){ //NN6,7用 document.getElementById(layName).style.left = x; document.getElementById(layName).style.top = y; } } // Cross-Browser function (end)-------------------------------------- X = new Array(); // X座標 Y = new Array(); // Y座標 dX = new Array(); // X座標方向の移動量 dY = new Array(); // Y座標方向の移動量 wait = new Array(); // 移動までの待ち時間 baseY = 320; // バウンドする地面の高さ offsset = 1; // 移動量 limitLeft = 130; // バウンドする左側の座標 limitRight = 680; // バウンドする右側の座標 moveNum = 10; // 一度に移動するレイヤーの数 timerID = 0; // タイマー変数 // 初期座標を取得します function getPos() { for(i=0; i<moveNum; i++) { layerName = "ABCDEFGHIJ".charAt(i);// レイヤー名の取得。 X[i] = getLEFT(layerName)*1;//*1はgetElementById return値の文字列を数値変換 Y[i] = getTOP(layerName)*1; //*1はgetElementById return値の文字列を数値変換 wait[i] = i*3; // 待ち時間 dX[i] = -8; // X座標方向の移動量初期値 dY[i] = 0; // Y座標方向の移動量初期値 } } // 文字をバウンドさせます function jumpTitle(){ if(document.layers||document.all||document.getElementById){ for (i=0; i<moveNum; i++){ if (wait[i] > 0) { wait[i]--; } else { layerName = "ABCDEFGHIJ".charAt(i); // レイヤー名の取得。 Y[i] = Y[i] + dY[i]; // Y座標を加算し移動させます。 if (Y[i] >= baseY) { dY[i] = -dY[i] } // 地面だったら移動方向を反転 else { dY[i] = dY[i] + offsset; } X[i] = X[i] + dX[i]; // X座標を加算し移動させます。 if ( X[i] <= limitLeft ) { // 左側の限界値を超えたら方向反転 X[i] = limitLeft; dX[i] = -dX[i]; } if ( X[i] >= limitRight ) { // 右側の限界値を超えたら方向反転 X[i] = limitRight; dX[i] = -dX[i]; } setTOPLEFT(layerName,X[i],Y[i]); } } clearTimeout(timerID); timerID = setTimeout("jumpTitle()",100);// タイマー割り込み設定 } } // --> </SCRIPT>


ボディ部に以下の記述をします。

<BODY>タグの中にonLoad="getPos();jumpTitle()"を記述します
<BODY bgcolor=lightyellow text="navy" onLoad="getPos();jumpTitle()">

<BODY>部中に下のレイヤーを記述します。 変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。

  1. ID="A"〜"J"----レイヤーの名前です。この名前はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
  2. 今しばらくお待ちを♪----飛び跳ねる文字を指定します。サンプルでは10個の文字を使ってますが、レイヤー数を変更すれば何文字でも使えます。画像にしたい時は<IMG>タグを使います。
  3. 最後の<HR>タグは地面です。top:220pxで地面の位置を調整できます。
<DIV CLASS="charpos" ID="A"><font color=#0066FF>今</font></DIV> <DIV CLASS="charpos" ID="B"><font color=#CC00FF>し</font></DIV> <DIV CLASS="charpos" ID="C"><font color=#FF00CC>ば</font></DIV> <DIV CLASS="charpos" ID="D"><font color=#FF6666>ら</font></DIV> <DIV CLASS="charpos" ID="E"><font color=#00FFCC>く</font></DIV> <DIV CLASS="charpos" ID="F"><font color=#FF0000>お</font></DIV> <DIV CLASS="charpos" ID="G"><font color=#FF6600>待</font></DIV> <DIV CLASS="charpos" ID="H"><font color=#FFCC00>ち</font></DIV> <DIV CLASS="charpos" ID="I"><font color=#CCFF00>を</font></DIV> <DIV CLASS="charpos" ID="J"><font color=#00FF66>♪</font></DIV> <DIV ID="hr" STYLE="position:absolute;left:0px;top:220px;"><HR noshade width="600"></DIV>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ