Image Move









【Source Code】
<script type="text/javascript">
<!--
  x=0;
  v=2;
  function moveImage()
  {
    x+=v;
    if((x>224)||(x<0))  v= -v; 
    document.Enemy.style.left= x;
  }
// -->
</script>
</head>

<body onLoad="setInterval('moveImage()',25)">
<h2>Image Move</h2>

  <img src="../img/enemy1.gif" name="Enemy"
    style="position:absolute;left:0px;top:70px;">
<br>

<body> の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
img タグの style で座標を設定して enemy1.gif を描画します。
style は 自由に配置 を参照して下さい。
<body onLoad="setInterval('moveImage()',25)">

  <img src="../img/enemy1.gif" name="Enemy"
    style="position:absolute;left:0px;top:70px;">

moveImage() 関数の定義です。
document.Enemy は name="Enemy" が設定されたリソースを指します。
x は画像を描画するX座標で、Enemy.style.left= x; で座標を変えながら移動します。
v は移動速度で右端(左端)まで動くと折り返します。
<script type="text/javascript">
<!--
  x=0;
  v=2;
  function moveImage()
  {
    x+=v;
    if ((x>224)||(x<0)) v= -v; 
    document.Enemy.style.left= x;
  }
// -->
</script>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)