|
|
|
今
し
ば
ら
く
お
待
ち
を
♪
03/16(Sun) 03:05
 飛び跳ねるタイトル
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
ページをオープンすると、文字タイトルが波打ちながら飛び跳ねるようにジャンプします。サンプルでは１０個の文字を使ってますが、何文字でも使えます。文字のかわりに画像も使えます。
■設置方法
| 使用するCross-Browser function | getLEFT、getTOP、setTOPLEFT |
| スタイルシート | charpos |
■ヘッダー部に以下の関数を定義します。
- .charpos { }の中のleft:200px;top:50px----文字のスタート位置です。
- font-size:25px"----文字の大きさです。
- width:30----レイヤー幅です。文字が欠ける場合は値を大きくします。
- baseY----バウンドする地面の高さです。
- limitLeft、limitRight----バウンドする左側と右側の座標です。あなたの好みに合うように調整して下さい。
- moveNum----文字の個数。文字を増やしたり減らした時はこの値を変更します。この値はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
- サンプルの初期値のままで使えます。上記以外の初期値はあまりいじらないほうが・・・
|
<![CDATA[
<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()"を記述します
|
<![CDATA[
<BODY bgcolor=lightyellow text="navy" onLoad="getPos();jumpTitle()">
]]>
|
■<BODY>部中に下のレイヤーを記述します。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- ID="A"〜"J"----レイヤーの名前です。この名前はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
- 今しばらくお待ちを♪----飛び跳ねる文字を指定します。サンプルでは１０個の文字を使ってますが、レイヤー数を変更すれば何文字でも使えます。画像にしたい時は<IMG>タグを使います。
- 最後の<HR>タグは地面です。top:220pxで地面の位置を調整できます。
|
<![CDATA[
<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>
]]>
|
|
|
