Использование DHTML и JavaScript для перемещения объекта

Я застрял. Я студент, изучающий 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>

Источник

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. Результат будет выглядеть как диагональное направление.

Вы можете, конечно, поменять их, если хотите по каким-то причинам.

Фон состоит в том, что у вас есть прямоугольная сетка пикселей и очень быстрый способ реального перемещения объекта. Вы не можете заметить, что это на самом деле два разных хода.

Источник
Другие вопросы по тегам