1 Тема від dp010694svv Востаннє редагувалося dp010694svv (30.09.2018 18:19:10)

  • dp010694svv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 30.09.2018
  • Повідомлень: 3
    • Репутація: 0

Тема: Анімація

Потрібно щоб куля рухалася з одного кінця блоку до іншого.  Вийшло щоб куля рухалася тіки в один бік, як зробити?
[code=HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Скрипты JavaScript</title>
    <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
        #div0 {
            position: relative;
            border: 1px solid blue;
            width: 200px;
            height: 20px;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <div id="div0">
        <img src="sharik.png" id="elemToMove"
            style="width: 20px; height: 20px; position: absolute; left: 0; top: 100;" />
    </div>
    <script type="text/javascript">
        var R = 0, dR = 5, zaderg = 50, int;
        var a = 10 * Math.PI / 180;

        function moveElem_tuda_obratno() {
            elemToMove.style.left = R * Math.cos(a) + 'px';
            R = R + dR;
        }
        var int = setInterval("moveElem_tuda_obratno()", zaderg);
    </script>
</body>
</html>
[/code]

2 Відповідь від dp010694svv

  • dp010694svv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 30.09.2018
  • Повідомлень: 3
    • Репутація: 0

Re: Анімація

.

3 Відповідь від leofun01 Востаннє редагувалося leofun01 (30.09.2018 21:50:38)

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Анімація

Видаліть зображення і вставте весь код (використовуючи тег [code]...[/code]).
А якщо понатискати Ctrl+C, Ctrl+V для вас надто складно, то на відповідь не чекайте. (частково виконано)

leofun01 вебсайт

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Анімація

запихніть той код в jsfiddle, аби можна було відразу переглянути його роботу

5 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Анімація

таакак, а що з title та назвами функцій? ви кацапієць?

Подякували: NaharD1

6 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Анімація

dp010694svv написав:

Потрібно щоб куля рухалася з одного кінця блоку до іншого.

Так ?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript</title>
    <style type="text/css">
        #div0 {
            position: relative;
            border: 1px solid blue;
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="div0">
        <img src="sharik.png" id="elemToMove"
            style="width: 20px; height: 20px; position: absolute; left: 0; top: 0;" />
    </div>
    <script type="application/javascript">
        var elemToMove = document.getElementById("elemToMove");
        var width = elemToMove.parentElement.offsetWidth - elemToMove.offsetWidth;
        var R = width >> 1;
        var t = 0.0, dt = 2.0 / 48;
        function moveElem_tudy_siudy() {
            elemToMove.style.left = R * (1 - Math.cos(t * Math.PI)) + 'px';
            t += dt;
        };
        var interval = setInterval(moveElem_tudy_siudy, 50);
    </script>
</body>
</html>
Подякували: dp010694svv1

leofun01 вебсайт