|
|
|
感謝の気持ち！記念碑
03/16(Sun) 03:03
 バウンドしながら静止するタイトル
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
タイトルが地面にあたるとバウンドしながら少しずつ減衰し最後に静止します。文字タイトルのかわりに画像タイトルも使えます。
■設置方法
| 使用するCross-Browser function | setTOP |
| スタイルシート | なし |
■ヘッダー部に以下の関数を定義します。
- サンプルの初期値のままで使えます。あなた好みにしたい方は「y座標スタート位置」「地面の位置」を変更してみて下さい。他の初期値はあまりいじらないほうが・・・
- 「Title」はバウンドさせるタイトルのレイヤー名です。レイヤー記述ID=の名前と対応してますので変更する時は両方を変更して下さい。
|
<![CDATA[
<SCRIPT Language="JavaScript">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01)
--------------------------------------------------------------------*/
// Cross-Browser function -------------------------------------------
// レイヤー上辺Y座標のセット
function setTOP(layName,y){
if(document.all) document.all(layName).style.pixelTop = y;//IE4,5,6,Opera6用
if(document.layers) document.layers[layName].top = y;//NN4用
if(document.getElementById) document.getElementById(layName).style.top = y;//NN6,7用
}
// Cross-Browser function (end)--------------------------------------
Y = 0; // y座標スタート位置
dY = 0; // 加速度
baseY = 130 // 地面の位置
offsetY = 2; // 減衰量
timerID = 0; // タイマー変数
function boundTitle()
{
Y = Y + dY;
if (Y >= baseY) { dY = -dY; Y = baseY;}
dY = dY + offsetY;
setTOP('Title',Y);
clearTimeout(timerID);
timerID = setTimeout("boundTitle('Title')",100);
}
// -->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
■<BODY>タグの中にonLoad="boundTitle()"を記述します
|
<![CDATA[
<BODY bgcolor=lightyellow text="navy" onLoad="boundTitle()">
]]>
|
■<BODY>部中に下のレイヤーを記述します。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- ID="Title"----タイトルレイヤーの名前です。
- left:130px----タイトルの、左端からの表示位置を指定します。
- font-size:35px----タイトル文字のサイズ。
- 感謝の気持ち！記念碑
(1)表示したいタイトル文字を記述します。
(2)サンプルは文字ごとに色が違いますが、スクリプトでは記述を簡単にするために１色にしてあります。文字ごとに色を変えたい場合は文字ごとに色指定をしてください。
- <font color=#FF00AA>感謝の気持ち！記念碑</font>の代わりに<img src="xxxx.gif">と画像にすれば指定したxxxx.gif画像がバウンドします。
|
<![CDATA[
<DIV ID="Title" STYLE="position:absolute;left:130px;top:0px;font-size:35px">
<font color=#FF00AA>感謝の気持ち！記念碑</font>
</DIV>
]]>
|
|
|
