Question

有人看到下面的两个代码块有什么区别吗？第一个完全不运行，第二个完美运行。为什么会这样？

    <title></title>

    <style type="text/css">

        #stones_image {
            /*border: 1px solid red;*/
            left: 0;
        }

    </style>

</head>

<body onload="set_timer()">
    <img src="pics/stones.png" id="stones_image">

    <script type="text/javascript">
        var the_timer, x_position = 0, the_image;

        function set_timer() {
            the_image=document.getElementById("stones_image");
            x_position=x_position+1;
            the_image.style.left=x_position;
            the_timer = setTimeout(set_timer, 50);
        }

    </script>

有效的代码：

<head>
    <script>
        var the_timer, x_position = 0, the_image;

        function set_timer() {
            the_image=document.getElementById("stones_image");
            x_position=x_position+1;
            the_image.style.left=x_position;
            the_timer = setTimeout(set_timer, 50);
        }
    </script>
</head>
<body onload="set_timer()">
    <img src="stones.png" id="stones_image"
         style="position:absolute; left:0">
</body>

Answer 1

在第一个代码中，您永远不会调用set_timer函数，因此它将永远不会执行。

在第二个代码中，set_timer在文档加载时被调用（使用<body onload="set_timer">，因此可以正常工作。

Answer 2

有两件事我看错了：

第一个缺少绝对位置。您必须添加样式中除position以外的任何static。
您必须添加带有注入样式的px。例如：the_image.style.left=x_position+**'px'**;

Answer 3

这是工作：

您忘了在变量x_position+"px";之后写“ px”

var the_timer, x_position = 0, the_image;

function set_timer() {
	  the_image=document.getElementById("stones_image");
	  x_position=x_position+1;
	  the_image.style.left=x_position+"px";
	  the_timer = setTimeout(set_timer, 50);
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body onload="set_timer()">

   <img  src="https://images.pexels.com/photos/631986/pexels-photo-631986.jpeg" id="stones_image" style="position:absolute; left:0;width:100%">

    <script type="text/javascript" src="test1.js"></script>

</body>
</html>

为什么我不能使用第一个代码移动图片？

3 个答案: