javascript - 使用onmousedown触发简单动画

Question

这是一个简单的函数，当按住按钮时，可以在屏幕上从左向右移动元素(图像)。

function moveRight () {
  var element = document.getElementById("dragged");
    var position = document.getElementById("dragged").style.left;
  if (position == 1175)
  {
    return false;
  }
  else
  {
    element.style.left = position + "1px";
    position++;
  }
}

按钮代码:

<button type-"button" onmousedown="moveRight()" onmouseup="returnToCentre()" onclick="returnToCentre()"> Click me!
</button>

图像元素的初始位置:

  left:20px;
  bottom:6px;

当我按住按钮时，它会立即向左移动，释放后它会返回到中心。请告诉我我做错了什么。我希望将左侧位置作为动画从 20px 更改为 1175px，一次一个像素。 注意:JS新手，请简单回答，无需JQuery解决方案。

Answer 1

    if (position == 1175)
    {
       return false;
    }

该代码会被执行吗？查看您的代码，位置的值似乎类似于“1175px”。还有这个呢:

element.style.left = position + "1px";

该语句将把两个字符串连接在一起。因此，如果position的值是一个整数，比如5，element.style.left将为“51px”；我认为可能是某种形式的数据格式不一致导致了您的问题。当您运行代码时，您可以轻松地注销这些值，以查看您得到的结果而不是您期望的结果。