Форум

DenMohinator · #1 (**permalink**) 03.06.2017, 20:28

Доброго времени суток!
Нужна помощь умных людей в решении сложного (для меня) задания.
Нужно добавить два рисунка, невидимые при загрузке страницы, и две кнопки. При нажатии на одну кнопку должно в цикле срабатывать проявление первой картинки и исчезновение второй картинки со скоростью 2000, а затем наоборот, при нажатии на вторую кнопку обе картинки должны появиться и прекратить мигание.
Я поискал в инете и нашел нужные мне данные, вот только моих знаний не хватает чтобы слепить из этого нормальный код.
Пожалуйста помогите.

рони · #2 (**permalink**) 03.06.2017, 20:48

DenMohinator,
html и css хотя бы сделайте, так больше шансов, что вам ответят.

рони · #3 (**permalink**) 03.06.2017, 20:48

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

j0hnik · #4 (**permalink**) 03.06.2017, 21:20

Интересная фантазия, с каждым днем мне все больше нравится этот форум.

рони · #5 (**permalink**) 03.06.2017, 21:27

DenMohinator,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body .tkl{
     display:  none;
     transition: all .8s linear;
     transform: scale(0);
  }
  body.open .tkl{
     display:   inline-block;
  }
  body.open .tkl.show{
     transform: scale(1);
  }
  </style>
</head>

<body>
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
 <img src="http://www.euflora.eu/i/gallery/14102.jpg" alt="" class="tkl">
 <input id="aaa" name="" type="button" value="show"  onclick="show()">
 <input id="bbb" name="" type="button" value="go"  onclick="go()">
  <script>
var timer, show;

function blinker(cls, duration, sel) {
    var elems = [].slice.call(document.querySelectorAll(sel));
    show = function() {
        document.body.classList.add("open");
        window.clearTimeout(timer);
        elems[0].classList.add(cls);
        elems[1].classList.add(cls)
    };
    return function() {
        show();
        (function mig(a) {
            elems.reverse();
            elems[0].classList.add(cls);
            elems[1].classList.remove(cls);
            timer = window.setTimeout(mig, duration)
        })()
    }
}
var go = blinker("show", 2000, ".tkl");

  </script>

</body>

</html>

j0hnik · #6 (**permalink**) 03.06.2017, 21:32

Зачетно получилось

, картинки в тему

DenMohinator · #7 (**permalink**) 03.06.2017, 21:42

Спасибо! Ты мне жизнь спас!

Форум

Справочник

Discord чат

Курсы javascript