使用 DHTML 和 JavaScript 移动对象答案

【问题标题】：Using DHTML and JavaScript to move object使用 DHTML 和 JavaScript 移动对象
【发布时间】：2016-02-20 09:06:27
【问题描述】：

我被困住了。我是一名学习 JavaScript 的学生，这个作业让我很生气……为什么？因为没有文本/教程等可以提供帮助。被告知要研究代码并使其移动。最初它从左到右移动......能够改变它并让它从上到下移动。我被卡住的地方不是我必须移动它在页面上对角移动。我找不到任何东西......请帮忙。不是要求这样做，而是给出一个提示或指向教程的方向......

这是我现在拥有的代码：

<html>
<head>
    <title>DHTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script language="JavaScript" type="text/JavaScript">
    <!--

        var row = 0;

        function moveBoatRight()
       {  //function moves boat towards the right shore     

            document.getElementById("Man").style.top=100+(row*12);  //This accesses the graphic on the page and moves its position

            if (row < 20)
            {
                 row++;  //only need 20 iterations to make it across the river
                window.setTimeout("moveBoatRight();",130);  //Recursive function that gives a slight delay in time to look more fulid
            } 

       }//end of moveBoatRight Function

     //-->
    </script>
</head>

<body bgcolor="#FFFFCE" >
                <h1><strong>Using DHTML</strong></h1>

                    <div id="Man" style="position:relative; left:100px; top:100px; visibility:visible; y-index:1; width: 100px; height: 103px;"><img border="0" src="arrowDown.png" width="95" height="103"></div> 
    </div>

    <form>
        <input type="button" id="sbutton" value="submit" onClick="moveBoatRight();">
    </form>

</body>

【问题讨论】：

这听起来很像一个“做我的家庭作业”的问题......但无论如何：对角线意味着横向和垂直。我猜这应该对你有帮助。
顺便说一句：欢迎来到 StackOverflow。请花一两分钟时间拨打tour。
实际上，如果您阅读最后一句话，我要求指出正确的方向，而不是让某人做我的作业。并且没有对角线并不意味着横向或垂直。垂直意味着上下。水平意味着横向。对角线表示从左上到右下或从右上到左下。 2004 年的 DHTML 代码（因为这是我能找到的唯一参考）如下，并且不包含 JavaScript。函数 moveObject(ObjectID,x,y) { var object = document.getElementById(objectID); object.style.left = x+'px'; object.style.top = y + 'px';
他说横向和纵向。如果你知道如何让它上下移动，你知道如何让它左右移动，那么你就有了你需要的一切。你必须同时做这些动作
谢谢辣椒……当我说老师说想办法的时候，我是认真的。说明是研究代码并弄清楚。因此，为了上下移动它，我将 z-index 更改为 y-index，将我的块从 .left 更改为 .top，并将位置更改为相对。我被困在如何让他们一起工作。我会写 y-index:1 和 z-index-1 来移动吗？我是保留绝对位置还是相对位置？我一直在尝试变化，但没有运气，我看过几个关于 DHTML 和运动的教程，但没有什么能将两者结合起来。只需要方向。

标签： javascript dhtml

【解决方案1】：

这将为您解决问题：

function moveBoatdiagonally() { 

        document.getElementById("Man").style.top=100+(row*12);  //This accesses the graphic on the page and moves its position
        document.getElementById("Man").style.left=100+(row*12);  //This accesses the graphic on the page and moves its position

        if (row < 20) {
             row++;  //only need 20 iterations to make it across the river
            window.setTimeout("moveBoatRight();",130);  //Recursive function that gives a slight delay in time to look more fulid
        } 

   }

如您所见，在循环的每次迭代中，您都会先在 y 方向上移动“船”，然后在 x 方向上移动。结果看起来像一个对角线方向。

如果您出于某些原因愿意，当然可以切换它们。

背景是您有一个矩形像素网格，以及一种实际移动对象的非常快速的方法。你没有注意到它实际上是两个不同的动作。

【讨论】：

谢谢伯基。这实际上完全有道理。我刚读完一篇关于它的教程，提到了运动的像素方面，z-index 需要是一个正整数。现在看到这一切都在一起了。另一个简单的问题....为什么要同时使用 DHTML 和 JavaScript...我认为 DHTML 在 2010 年之前就被淘汰了？
@JasonNorthcutt 在这里感谢你的首选方式是赞成，甚至可能是接受的答案;-) 对于你的另一个问题：一个简单的答案是你需要一些东西来开始学习。然后，逐步建立你的知识。顺便说一句：我早在那之前就开始编程了，所以有些人甚至可能称其为现代主义的东西 ;-) 哦，请选择 tour，它确实提供了很多信息。
因为他是一个新用户，他没有足够的声誉来投票。但你可以拥有我的:)
感谢两位。我还在学习……课堂作业看 youtube 视频和创作并没有帮助，但到目前为止我学到了很多……这对我 40 岁的全职工作没有帮助。大声笑....但是说真的，你们俩都帮了大忙！