JavaScript:移动图像

javascript: moving an image

本文关键字：图像 移动 JavaScript      更新时间：2023-09-26

编辑此页面，供将来阅读此页面的人使用:P

看来我在这里要求太多了..但是非常感谢那些帮助我解决这个问题的人！ 其实我想接受你所有的答案，但似乎我只能接受一个..>.>

问题1：
我想移动图像，但是当我尝试获取图像位置（使用 document.getElementById().style.left）时，当我将其转换为整数时，它会显示一个 NaN 值。我想知道如何解决这个问题：/

这是我的代码：

<script type="text/javascript">
    function playit()
    {
        alert(parseInt(document.getElementById('ball').style.left)); <!-- shows a NaN value -->
    }
</script>

我将图像放入表中并使用onclick函数调用它; <td id="frame" colspan="5" onclick="playit()">确切地说，我这样声明图像：<img src="play/ball.png" id="ball" name="ball"/>

这是我的图片CSS：

#ball
{
    position:absolute;
    top:500px;
    left:500px; 
}

解决方案（由VIPIN JAIN给出）：使用.offsetLeft而不是element.style.left




问题2：
编辑：我用.offsetLeft修复了它，它工作得很好。现在，当我尝试移动图像时，我遇到了另一个错误。据说我使用了太多的递归。我知道发生这种情况是因为我正在使用递归，但我想知道，使用递归有什么问题？

这是我的代码：

<script type="text/javascript">
    <script type="text/javascript">
    var lball = document.getElementById('ball').offsetLeft;
    var speed = 500;
    function moveleft()
    {
        if(document.getElementById('ball').offsetLeft >0)
        {
            document.getElementById('ball').offsetLeft-=1;
            setTimeout(moveleft(), speed);
        }
        else gameover();
    }
    function playit()
    {
        score = 0;
        setTimeout(moveleft(), speed);
    }
</script>

有人可以帮助我吗？谢谢:)

解决方案（由Teemu提供）：请参阅Teemu在下面"编辑II"部分的评论。


问题3（实际上我在评论:P上问的）
当我尝试使用 document.getElementById('ball').offsetLeft-=1; 设置图像位置时，它显示一个未定义的值。

解决方案（由凯末尔·法迪拉给出）："那是因为你无法设置元素的offsetLeft值。您必须将新位置值设置为 .style.left 。像这样的东西：element.style.left = new_value + "px";"


问题4（再次，我在评论:P上问它）
似乎图像不会顺利移动（看起来它突然"扭曲"到另一个地方）。我已经提高了speed值，但它仍然不起作用。我错过了什么吗？我想知道..:/

解决方案（由凯末尔·法迪拉给出）："将speed设置为 10 或 20。这应该使动画足够流畅。为了使图像移动得更快，而不是将左偏移量减少 1，请尝试将其减少 3。

document.getElementById('ball').style.left返回 '' （或 undefined ），如果在检索之前尚未设置该属性。这就是为什么你从parseInt()那里得到NaN.

编辑：

看来你的风格定义是可以的（在你编辑你的帖子之后）。您可以尝试在parseInt()中使用基数：

alert(parseInt(document.getElementById('ball').style.left,10));

这被记录为不倾斜，但有时使用它会有所帮助。

编辑二

发生这种情况是因为您要执行所有setTimeout两次，并且没有清除它们。试试这样：

var delay;
function moveLeft(){
  :
  if(delay){ // Add this if before all of your setTimeout() calls and in gameover() too
    clearTimeout(delay);
  }
  delay=setTimeout(moveLeft, speed);
  :
}

通过像这样设置超时setTimeout(doFunction(),delaytime);因为()而立即执行doFunction，并在delaytime之后再次执行，这真的是太多的递归......

你应该使用 jQuery，它要容易得多。尝试类似的东西

$(function(){
$("img#ball").offset({top: 10px, left: 500px});
});

更多信息可以在这里找到：

http://api.jquery.com/offset/

有关jQuery的一般信息可以在这里找到：

http://jquery.com/

如果 CSS 样式

是在外部样式表中声明的，则无法使用 element.style 来获取 CSS 样式。来自 MDN 文档：

但是，它对于了解元素的样式没有用 常规，因为它仅表示在 元素的内联样式属性，而不是来自样式规则的属性 其他位置，例如部分中的样式规则或外部 样式表。

https://developer.mozilla.org/en/DOM/element.style

相反，您必须使用 window.getComputedStyle() 来获取属性。

window.getComputedStyle(document.getElementById('ball')).left; // returns 500px

这需要offsetLeft和offsetTop值，请参阅链接

这篇文章

相关文章：