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”;我认为可能是某种形式的数据格式不一致导致了您的问题。您可以在运行代码时轻松注销值，以查看您获得的内容而不是您期望的内容。

使用onmousedown触发简单的动画

1 个答案: