キャラクタを下から上へ動かす(画面上端で停止)


動作ブラウザ 【 IE:4.0  NN:4.0
Internet Explorer Netscape Navigator Opera iCab Safari
3.0 4.0 4.5 5.0 5.5 6.0 2.0 3.0 4.0x 4.x 6.0 7.0 6 7 2.x Beta
Windows × - × × × × × × × × - -
Macintosh × - - × × × × × × × - ×
UNIX - - - - - - × × × × × × - - - -

ポイント if (cy > 0) cy = cy - 10;
document.images["myChar"].style.top = cy;
setTimeout("moveChar()",mSec);
説  明 キャラクタを下から上側に移動させるにはキャラクタ(ここでは画像)のY座標を減算します。Y座標は直接スタイルシートプロパティを操作するのではなく、変数で用意します。減算前または減算後に画面左端を超える場合にはY座標を減算しないようにします。画面上端の座標値は0なので、ゼロとY座標を比較します。その後でスタイルプロパティであるtopに入れます。
キャラクタを移動させる場合には、あらかじめスタイルシートで座標系(絶対座標)を指定しておかないと全く動かないブラウザがあります。
サンプル <html>
<head>
<title>キャラクタを下から上へ動かす(画面上端で停止)</title>
<script Language="JavaScript"><!--
cy = 0; // キャラクタの最初のY座標
mSec = 200; // キャラクタの移動速度(1秒=1000)
function moveChar()
{
if (cy > 0) cy = cy - 10;
document.images["myChar"].style.top = cy;
setTimeout("moveChar()",mSec);
}
function startChar()
{
cx = document.body.clientHeight - document.images["myChar"].height;
setTimeout("moveChar()",mSec);
}
// --></script>
</head>
<body onLoad="startChar()">
<img src="char.gif" name="myChar" style="position:absolute;top:4000px;left:0px;">
</body>
</html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA