ＨＰ作成講座、脱初心者編

文字や画像を動かす。その３

今回はposition:absoluteとposition:relativeを使った例を一つずつ！

それでは、まず position:absolute使用例です。

にマウスを当てるとお化けがでる！！

では、これについて説明です。ソースは、

<head>
<script language="JavaScript">
<!--
var k1=0,ox,oy; //ここで使う変数の用意。ｋには最初から０をいれる。
function oba(){

if (k1==0){

ox=-100;
oy=250;
document.all.obake.style.display = "";

} else {

ox=ox+6;
oy=oy-4;

}

document.all.obake.style.pixelTop = oy;
document.all.obake.style.pixelLeft = ox;
k1=k1+1; //　k1++　と書いても良い！
timerID2=setTimeout("oba()", 50);

if (ox>=250){

obastop();

}

}

function obastop(){

k1=0;
document.all.obake.style.display = "none";
clearTimeout(timerID2);

}

//-->
</script>
</head>

<body>
<span id="obake"
style="font-family:'ＭＳＰゴシック';font-size:30pt;color:#8080ff;
position:absolute;left:-100px;top:250px;
display:none">
～～～(m□□)m
</span>

<span onMouseOver="if(k1==0){oba();}" onMouseOut="obastop();">
<img src="pic/daruma_nahanaha.gif" width="48" height="64" border="0">
</span>にマウスを当てるとお化けがでる！！

</body>

まず、<body>の中には、２つの<span></span>タグがあります。
最初の方には、移動させるお化け（文字）について、スタイルシートで字の大きさや色、表示する位置を決めています。
position:absoluteですから、基準の位置はこのページの左上です。
left:-100pxですから、ページの左端より、さらに左に１００ピクセルのところです。
そして、display:none
これは、”～～～(m□□)m”を表示させないようにする指定です。
もし、display:noneを指定しなければ、最初から画面に表示されます。
つまり、あえて表示しないようにしたのです。そして、ＪＡＶＡスクリプトでdisplay:noneを解除して表示するようにしています。
そして、このタグで囲んだもののｉｄをｏｂａｋｅとしました。
id="obake"
このｉｄをＪＡＶＡスクリプトで指定します。

では、その下の<span></span>の方です。
ここでは、だるまの画像を表示させるｉｍｇタグを囲んでいます。
onMouseOverで、この画像にマウスが重なったときのこと。
onMouseOutで、この画像からマウスが放れたときのこと。
をそれぞれ、指定しています。

では、ＪＡＶＡスクリプトの方です。
ひとまとまりにしたプログラム（関数という）は、今回２つあります。
１つはoba()と、obastop()
最初に変数について宣言しています。（変数について参照）
var k1=0,ox,oy;
ｋ１はｏｂａ（）関数が働くごとに１ずつ増えていきます。つまり、何回その関数が働いたかを数えるために用意しました。
ｏｘはｌｅｆｔの数値用、ｏｙはｔｏｐの数値用に用意しました。
oba()を見てください。
(見たあとはブラウザの”戻る”で戻ると良いですよ。）
ｋ1＝ｋ1+1;というのがあります。
ｋ１は最初０ですが、１度ｏｂａ（）が実行されると、１を足されて（つまり、０＋１）、１になります。
そして、timerID2=setTimeout("oba()", 50);で、１０００分の５０秒後（０．０５秒後）に、また、ｏｂａ（）が実行されます。そのときにまたさらに１を足されていきます。
そして、またtimerID2=setTimeout("oba()", 50);があるので、１０００分の１秒後にｏｂａ（）が実行されます。そしてまた、ｋ１に１を足す。・・を繰り返すのです。
そして、ｋ１が０の時、つまり一番最初にｏｂａ（）が実行されたとき、

if (k1==0){

ox=-100;
oy=250;
document.all.obake.style.display = "";

} else {

ox=ox+6;
oy=oy-4;

}

ｏｘとｏｙに最初にお化けが出る位置を入れて、
document.all.obake.style.display = "";で、ｉｄがobakeの<span></span>のスタイルシートのdisplay:noneを解除しています。（つまり、最初に画面に表示しないと指定したものを解除しています。）
これで、お化け（～～～(m□□)m）が現れます。
（if(k==0){・・・}else{・・・}についてはここ参照。）
そして、ｋ１が０１でない場合（２回目以降）は、繰り返されるたびに、ｏｘに６ずつ足します。（６ずつ右に移動する。）
繰り返されるたびに、ｏｙから４ずつ引きます。（４ずつ上に上がる。）
それで、その次のこれが、スタイルシートのｌｅｆｔとｔｏｐの数値を変更する部分です。
document.all.obake.style.pixelTop = oy;
document.all.obake.style.pixelLeft = ox;
ｌｅｆｔ、ｔｏｐそれぞれを、ｏｘ，ｏｙに変更しています。

そして、
if (ox>=250){

obastop();

}
のところでは、繰り返されるたびにｏｘに６ずつ出していった結果、ｏｘが２５０以上になったら、関数のobastop()を実行します。（obastop()参照。）
ここでは、ｋ１を０にしてています。
さらに、oba()で、display:noneを解除しましたが、それをまた、display:noneにします。
clearTimeout(timerID2);で、timerID2=setTimeout("oba()", 50);を、解除します。
つまり、１０００分の５０秒後に繰り返すのをやめるのです。
そうすると、お化けの動きがストップします。
display:noneに、戻っているのでお化けは画面に表示されずに消えます。
だるまに重ねたマウスカーソルを、だるまから離しても、obastop()が働き、お化けが止まって消えます。これは、この<span>タグに指定したイベントハンドラ、onMouseOut="obastop();"の働きによるものです。
ついでに、onMouseOver="if(k1==0){oba();}"は、
マウスカーソルがだるまに重なったとき、もしｋ１が０ならｏｂａ（）を実行すると言うことです。
なぜ、ｋ１が０の時だけ実行するのかというと、ｋ１が０でないときは、すでに今ｏｂａ（）が動いているときだからです。

次にposition:relativeの使用例です。

★	だるま・ナハナハ	★
★		★
★	マウスカーソルを重ねると逃げる	★

ソースは、

<head>
<script language="JavaScript">
<!--
var k=0,v=0,dx=0;
function nigeru(){

document.all.dn.style.pixelLeft = dx;

if (v==0){dx=dx+10;}else{dx=dx-10;}
k=k+1;
timerID=setTimeout("nigeru()",50);
if(k>=24){

k=0;
v= (v==0)?1:0;
clearTimeout(timerID);

}

}
//-->
</script>
</head>

<body>
<table border="1" width="400" align="center">
<tr>

</tr>
<tr>

</tr>
<tr>

<td align="center" valign="middle" width="50">
★
</td>

<td width="300">
<div align="center">
マウスカーソルを重ねると逃げる
</div>
</td>

<td align="center" valign="middle" width="50">
★
</td>

</tr>
</table>
</body>

そして、解説入り

<head>
<script language="JavaScript">
<!--//ＪＡＶＡスクリプト始まり。
var k=0,v=0,dx=0;//変数の宣言
function nigeru(){
//ひとまとまりのプログラムにnigeru()という名前を付ける。

document.all.dn.style.pixelLeft = dx;
//ｉｄがdnの部分のｌｅｆｔの位置はdx。
//　dxには最初０が入っている。
if (v==0){dx=dx+10;}else{dx=dx-10;}
//もしｖが０だったら、dxには１０を足す。（１０ピクセル右に移動）
//ｖが０でなければ、dxから１０を引く。（１０ピクセル左に移動）
k=k+1;//この関数nigeru()が、実行されるたびに１を足していく。

timerID=setTimeout("nigeru()",50);
//１０００分の５０秒後に、nigeru()を実行する。
if(k>=24){//もしｋが２４を越えたら・・

k=0;//ｋは０
v= (v==0)?1:0;//ｖが０ならｖを１に、ｖが０でないならｖを０に！参照
clearTimeout(timerID);

//タイマーを止める。つまり繰り返さなくなる
} //このように２４回やると動きが止まる。

}
//ここまでＪＡＶＡスクリプト。
//-->
</script>
</head>

<body>

<table border="1" width="400" align="center">
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>
</body>

だるまが止まっているときは、ｋは０になっています。
だるまにマウスカーソルが重なると、ｋが０の時なら、nigeru()が実行され、だるまが動きます。
onMouseOver="if (k==0){nigeru();}"がだるまの画像を囲む<span></span>に設定されています。
nigeru()は、その中のtimerID=setTimeout("nigeru()",50);の働きで、次々に繰り返されていき、その都度ｋに１ずつ足していきます。
だから、だるまが動いている間は、ｋは０ではありません。
そのときにマウスカーソルがだるまに重なっても何も影響しません。

ｖが０の時はだるまは左から右に動きます。
最初はｖは０にしています。つまり、最初は左から右に動くようにしています。
nigeru()が繰り返されるたびに、だるまは１０ピクセルずつ右に動きます。
そして、１ずつ足されてきたｋが２４になると止まります。
止まるついでに、ｋを０にしておき、ｖを、１にします。
次にnigeru()が実行されるときは、ｖが１になっていますので、今度はだるまは右から左に動きます。
if (v==0){dx=dx+10;}else{dx=dx-10;}
は、ｖが０の時はｄｘに１０足します。ｖが０でないときはｄｘから１０を引きます。
そして、この右から左への動きも２４回で止まります。
止まるついでに、ｖを０にします。（次は左から右だ！）
ｋも０にします。

ＰＣ－Ｐａｒｋトップ

心の話サイコロＴｏｗｎ！

広告		[PR] 花　再就職支援冷え対策　わけあり商品	無料レンタルサーバー