Question

我已经花了几个小时尝试通过JavaScript向左移动<div>块，然后回到原来的位置。没机会。

这是代码：

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

Answer 2

不，onload无法在DIV元素上工作将move()放在init函数中，但也包括：
尽可能使用requestAnimationFrame，否则将setTimeout设置为1000/60 ms（~60FPS），您可以使用Element.getBoundingClientRect()来检索.left位置。
要存储初始位置（100），您可以使用自定义属性直接在元素Object中记忆值：

var block= null;

function rect(el){
  return el.getBoundingClientRect();
}

function init() {
  block = document.getElementById('myDiv');
  block.initialLeft = rect(block).left; // Store original position
  move();
}

function move() {
  var left = rect(block).left + 10;
  if(left>600) left = block.initialLeft; // Reset to initial value
  block.style.left = left +'px';
  return requestAnimationFrame(move) || setTimeout(draw, 1000/60);
}

window.onload = init;

<强> jsBin demo

JS中的动画不会移动

2 个答案: