javascript - JS中的动画不会移动

Question

我花了几个小时试图制作一个 <div>阻止通过 JavaScript 向左移动，然后返回到原始位置。没有机会。

这是代码:

JS

var block= null;

function init() {
    block= document.getElementById('myDiv');
}

function move() {
    block.style.left =  parseInt(block.style.left) + 10 + 'px';

    if(parseInt(block.style.left)>=600) {
        block.style.left = 12;
    }

    setTimeout(move,20);
}

window.onload = init;

HTML

<div id="myDiv"  onload="move();">
    <img src="image.png" id="anImage" >
</div>

CSS

#myDiv {
    position: absolute;
    bottom: 40%;
    left: 100px;
    border: 3px solid black;
}

你在代码中看到的就是这里面涉及到的所有元素(以及它们的样式)。 js 文件正确加载并与其他功能一起使用(更改 div 内的图像等...)。

如果您看到我犯的任何错误，请指出给我。这是我的第一个移动动画，它不能让它正常工作。

Ps:它应该只适用于此，所以我不打算使用 jQuery。

Answer 1

将 move(); 添加到您的 init 函数中:

function init() {
  block= document.getElementById('myDiv');
  move();
}

如下更改您的 move() 函数:

function move() {   
  block.style.left =  parseInt(block.offsetLeft, 10) + 10 + 'px';

  if(parseInt(block.offsetLeft, 10)>=600) {
    block.style.left = '12px';
  }

  setTimeout(move,20);
}

Working fiddle