アニメーション1

Duke

Duke(Javaのマスコット)を動かしてみましょう。

<style>
#duke {
  position: relative;
  left: 0px;
}
</style>
<script>
let duke, x, timer;
function move() {
  x += 10;
  duke.style.left = x + 'px';
  if (x > 500) clearInterval(timer);
}
window.onload = function() {
  x = 0;
  duke = document.getElementById('duke');
  timer = setInterval(move, 100);  // 100msごとにmove()を呼ぶ
}
</script>
<img id="duke" src="duke.gif" alt="Duke">

必要なCSSは次のものです:

必要なJavaScriptの関数は次のものです:

解除する必要があるときは次のように setInterval() の戻り値を保存しておきます。