0

CSS:

#sharks {
    content:url(sharks.jpg);
    position:absolute;
}

JS:

var winHeight = window.innerHeight;// get the window height & width
var winWidth = window.innerWidth;
var clock;
var index = 0;

function do_move(image) {
    fish = document.getElementById(image);
    horz = fish.style.left;
    horz = parseInt(horz.substring(0,horz.length-2));
    fish.style.left = (horz+1)+'px';
}

function add_shark() {

    var height = Math.floor((Math.random()*winHeight)+100);
    var image = document.createElement("IMG");
    image.setAttribute("id", "sharks" + index);
    image.setAttribute("style", "position:absolute;top:"+height+"px;left:0px;");
    document.body.appendChild(image);
    do_move(image.id);
    index++;
}

HTML:

<input type="button" value="Add a Shark" onclick="add_shark();">

このコードを見て、HTML のボタンを使用して、画面の片側にサメの画像を配置し、それが反対側に移動することを期待しています。

現在、このコードは画面左側のランダムな Y ポイントにサメを配置しますが、サメは動きません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

あなたがする必要があるのは、 window.setTimeout() を使用して、move 関数が自分自身を何度も呼び出してアニメーションを発生させることです。

これはあなたが望むものに近いはずですが、実際にはまだ実行していません:

function do_move(image) {
    fish = document.getElementById(image);
    horz = fish.style.left;
    horz = parseInt(horz.substring(0,horz.length-2));

    // How far we are moving the image each "step"
    horz += 10;
    fish.style.left = (horz)+'px';

    // The total distance we are moving the image
    if (horz < 500) {
      // Set things up to call again
      window.setTimeout(function() {
        do_move(image);
      }, 250);  // 1/4 of a second
    }
}
于 2013-11-07T00:36:31.150 に答える