Скрытие/Отображение элементов с интервалом
Доброго времени суток!
Нужна помощь умных людей в решении сложного (для меня) задания. Нужно добавить два рисунка, невидимые при загрузке страницы, и две кнопки. При нажатии на одну кнопку должно в цикле срабатывать проявление первой картинки и исчезновение второй картинки со скоростью 2000, а затем наоборот, при нажатии на вторую кнопку обе картинки должны появиться и прекратить мигание. Я поискал в инете и нашел нужные мне данные, вот только моих знаний не хватает чтобы слепить из этого нормальный код. Пожалуйста помогите. |
DenMohinator,
html и css хотя бы сделайте, так больше шансов, что вам ответят. |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Интересная фантазия, с каждым днем мне все больше нравится этот форум. :victory:
|
Мигалка на js
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> |
Зачетно получилось :yes:, картинки в тему:yes:
|
Спасибо! Ты мне жизнь спас!
|
Часовой пояс GMT +3, время: 16:07. |