キャラクタを左右に往復運動させる（端で一定時間停止）


■動作ブラウザ　【 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 - - - - - - × × × × ○ ○ - - - -

ポイント count++;
count = count % 70;
if ((count >10) && (count < 30)) cx = cx + 4;
if ((count >40) && (count < 60)) cx = cx - 4;
document.images["myChar"].style.left = cx;
setTimeout("moveChar()",mSec);
説　　明 キャラクタを往復運動させるにはカウンタ変数を用意します。カウンタ変数の値を加算し、剰余を求めます。この除数が往復運動させる際の回数になります。剰余の値の範囲の値によってキャラクタの座標を加算するか減算するか、もしくは何もしないかを決めます。X座標は直接スタイルシートプロパティを操作するのではなく、変数で用意しスタイルプロパティであるleftに入れます。
キャラクタを移動させる場合には、あらかじめスタイルシートで座標系（絶対座標）を指定しておかないと全く動かないブラウザがあります。
サンプル <html>
<head>
<title>キャラクタを左右に往復運動させる（端で一定時間停止）</title>
<script Language="JavaScript"><!--
cx = 0; //　キャラクタの最初のX座標
count = 0;
mSec = 100; //　キャラクタの移動速度（1秒＝1000）
function moveChar()
{
count++;
count = count % 70;
if ((count >10) && (count < 30)) cx = cx + 4;
if ((count >40) && (count < 60)) cx = cx - 4;
document.images["myChar"].style.left = cx;
setTimeout("moveChar()",mSec);
}
// --></script>
</head>
<body onLoad="moveChar()">
<img src="char.gif" name="myChar" style="position:absolute;top:0px;left:0px;">
</body>
</html>
補足説明 なし

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