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() 让您的移动函数一遍又一遍地调用自身以使动画发生。

这应该接近你想要的，但我还没有真正运行它：

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 回答