Question

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点，但它不会移动。

非常感谢任何帮助。

Answer 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
    }
}

你如何使用Javascript放置图像并使其移动？

1 个答案: