1

为将来想阅读此内容的人编辑此页面：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;，它显示一个未定义的值。

解决方案（由Kemal Fadillah给出）： “那是因为你不能设置offsetLeft元素的值。你必须将新的位置值设置为.style.left。像这样的东西：element.style.left = new_value + "px";”


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

SOLUTION（由Kemal Fadillah给出）： “设置speed为 10 或 20。这应该使动画足够平滑。为了使图像移动得更快，而不是将左侧偏移减少 1，尝试将其减少3."

4

4 回答 4

1

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

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

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

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

可以在此处找到有关 jQuery 的一般信息：

http://jquery.com/

于 2012-04-16T11:17:00.230 回答
1

这个要求offsetLeft和offsetTop值请参考链接

这个帖子

于 2012-04-16T11:17:09.667 回答
1

document.getElementById('ball').style.left返回''（或undefined），如果您在检索之前没有设置属性。这就是为什么你NaN从parseInt().

编辑：

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

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

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

编辑二

发生这种情况，因为您执行 all setTimeouts 两次，而您没有清除它们。试试这种方式：

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，这真的是太多的递归......

于 2012-04-16T11:34:12.533 回答
1

element.style如果在外部样式表中声明，则无法通过 using 获得 CSS样式。来自 MDN 文档：

但是，一般来说，它对于了解元素的样式并没有什么用处，因为它只表示在元素的内联样式属性中设置的 CSS 声明，而不是来自其他地方的样式规则的那些声明，例如部分中的样式规则或外部样式床单。

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

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

window.getComputedStyle(document.getElementById('ball')).left; // returns 500px
于 2012-04-16T11:42:38.090 回答