Форум

blackdiie · #1 (**permalink**) 03.06.2017, 22:20

Нужна помощь знающих людей.

Надо сделатьть пять областей div 40х40 пикселей с
id “div1”, “div2”,…,“div5”, раскрашенные в разные цвета, невидимые при загрузке страницы, и кнопку. При нажатии на кнопку должно в цикле срабатывать волнообразное проявление областей div слево-направо, а затем наоборот, исчезновение. Цикл работает до тех пор, пока не закрыта страница.
Сам я такое сделать не смогу

рони · #2 (**permalink**) 03.06.2017, 23:52

blackdiie,
а что сможите?

рони · #3 (**permalink**) 04.06.2017, 00:03

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body .tkl{
     display:  none;
     transition: all .8s linear;
     width: 0px;
     height: 40px;
     float: left;
  }
  body.open .tkl{
     display:   inline-block;
  }
  body.open .tkl.show{
      width: 40px;
  }
  </style>
</head>

<body>
 <input id="bbb" name="" type="button" value="go"  onclick="go()"><br>
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
 <img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">


  <script>
var timer, show, n = 0, fn = ["add","remove"];

function blinker(cls, duration, sel) {
    var elems = [].slice.call(document.querySelectorAll(sel));
    show = function() {
        document.body.classList.add("open");
        window.clearTimeout(timer);
    };
    return function() {
        show();
        (function mig(a) {
            elems[n].classList[fn[0]](cls);
            n = ++n % elems.length;
            if(!n) {elems.reverse();fn.reverse()}
            timer = window.setTimeout(mig, duration)
        })()
    }
}
var go = blinker("show", 800, ".tkl");

  </script>

</body>

</html>

blackdiie · #4 (**permalink**) 04.06.2017, 00:57

Здравствуй, а как вместо картинок div подключить?

blackdiie · #5 (**permalink**) 04.06.2017, 00:58

Спасибо за код.

рони · #6 (**permalink**) 04.06.2017, 01:30

Сообщение от blackdiie

Здравствуй, а как вместо картинок div подключить?

хоть немного-то html и css знать надо ...

<div class="tkl" style="background-color: #00FF00"></div>

и так 5 раз вместо картинок

j0hnik · #7 (**permalink**) 04.06.2017, 03:16

я знаю как покороче записать
так чисто как альтернатива, да и мне тренироваться надо

<head>
	<meta charset="utf-8">
	<style>
		div{
			width: 40px;
			height: 40px;
			display: inline-block;
			opacity: 0;
		}
	</style>
</head>
<body>
<button id="pusk">Пуск</button>
<div></div><div></div><div></div><div></div><div></div>
	<script>
		document.getElementById("pusk").onclick = function() {
			var el = document.querySelectorAll('div');
			var col = ["red","green", "blue","violet", "orange"]
			for(var i=0; i<5; i++){
				el[i].style.backgroundColor = col[i];
				el[i].style.animation = 'p'+i+'e 2s infinite';
				var keyframes = '@keyframes p'+i+'e {0% {opacity: 0;}'+(10+i*10)+'% {opacity: 1;}'+(90-i*10)+'% {opacity: 1;} 100% {opacity: 0;}}';
				var s = document.createElement('style');
				s.innerHTML = keyframes;
				document.getElementsByTagName('head')[0].appendChild(s);
			}
document.body.removeChild(document.getElementById("pusk"));
		}
	</script>
</body>

рони · #8 (**permalink**) 04.06.2017, 08:56

Сообщение от j0hnik

я знаю как покороче записать

строка 27 слишком длинная, есть вариант на 50% короче и есть уже сейчас на 80% меньше.

j0hnik · #9 (**permalink**) 04.06.2017, 12:24

Сообщение от рони

строка 27 слишком длинная, есть вариант на 50% короче и есть уже сейчас на 80% меньше.

про строку на this заменить?
или вы в целом про код?

рони · #10 (**permalink**) 04.06.2017, 15:38

j0hnik,
да про this

Форум

Справочник

Discord чат

Курсы javascript