如何修复Javascript动画功能？

我试图在屏幕上移动图像，并在图像到达屏幕边缘时将其重置回起始位置。我已经/让动画部分工作，但在窗口边框上仍有困难

我的moveDown函数按预期工作，但当将代码复制到moveRight函数时，它会将图像移动十个像素以上，重置并陷入重复相同移动的循环中

提前感谢您的帮助，我很想听听关于如何清理此代码或使其更优化的想法

    <script type = "text/javascript">
     <!--
        var imgObj = null;
        var animate ;
        var maxw = window.outerWidth + "px";
        var maxh = window.innerHeight + "px";

        function init() {
           imgObj = document.getElementById('myImage');
           imgObj.style.position= 'relative'; 
           imgObj.style.left = '0px'; 
           imgObj.style.top = '0px'; 
        }

        function moveRight() {
           if (imgObj.style.left > maxw) {
              imgObj.style.left = "0px";
              imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
              animate = setTimeout(moveRight,20); 
           } else{
           imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
           animate = setTimeout(moveRight,20); 
           document.getElementById("test").innerHTML = maxw;
           document.getElementById("test2").innerHTML = imgObj.style.left;
           }
        }

        function moveDown() {
           if (imgObj.style.top > maxh) {
              imgObj.style.top = '0px';
              imgObj.style.top = parseInt(imgObj.style.top) + 10 + 'px';
              animate = setTimeout(moveDown,20); 
           } else{
              imgObj.style.top = parseInt(imgObj.style.top) + 10 + 'px';
              animate = setTimeout(moveDown,20);   // call moveDown in 20msec
           }
        }


        function stop() {
           location.reload();
        }

        window.onload = init;
     //-->
  </script>

我认为moveDown也被破坏了，但你还没有注意到

imgObj.style.left和maxw都是字符串。11px大于1000px。 也许maxh恰好是一个有效的值，但maxw不是

解决方案相当简单：使用parseInt和compare作为数字

---

您还可以使用来避免从样式中获取值。请记住，访问getBoundingClientRect会触发重新绘制，这会使动画变得杂乱无章，从这个意义上讲，这并不比访问.style.要好。

window.outerWidth的值是什么？有什么理由不使用window.innerWidth吗？我最初使用的是window.innerWidth。它对我不起作用，所以我尝试使用window.outerWidth作为测试，看看它是否对我起作用。我忘了把它换回去。谢谢你的接球！谢谢你的回答。我更新了maxw以使用parseInt，并将parseInt放在if块的imgObj.style.left上，这对我很有用。在执行过程中，我看不到moveDown是如何被破坏的，但我将更新代码，以便在这方面使用parseInt。