Как реализовать анимацию накладывающихся окон?

Coutty · Конфигурация компьютера

HTML код:

<html>
<head>
<title>1</title>
<script type="text/javascript">
params = {
'width':300,
'height':300,
'num':10,
'offsetX':20,
'offsetY':20
}

function showWindows() {
  txt = '';
  for (i = 0; i < params.num; i++)
    {
	txt += "<div style='position:absolute; width:" + params.width + "; height:" + params.height + "; z-index:" + i + "; top:" + (params.offsetY * i) + "; left:" + (params.offsetX * i) + "; background:yellow; border:1px solid black'>" + i + "</div>";
	}
  document.getElementById("maincontainer").innerHTML = txt;
}
</script>
</head>
<body onload="showWindows()">
<div id="maincontainer" style="position:absolute; top:100px; left:300px"></div>
</body>
</html>

Мне кажется, тут даже пояснения не требуются. Но всё же - переменные в params задают различные параметры отображения последовательно:
ширина - высота - количество - сдвиг по горизонтали относительно предыдущего - сдвиг по вертикали

blacks2 · Отправлено: **03:01, 22-02-2010** | #3

Цитата Coutty:

Мне кажется, тут даже пояснения не требуются. »

СПАСИБО!
А как к этому чуду можно добавить задержку на появления окна чтоб появилась анимация?

Coutty · Конфигурация компьютера

Да, точно, анимация же...

HTML код:

<html>
<head>
<title>0</title>
<script type="text/javascript">
params = {
'width':300,    // ширина
'height':300,   // высота
'num':10,       // количество
'offsetX':20,   // сдвиг по горизонтали
'offsetY':20,   // сдвиг по вертикали
'latency':1000, // задержка в миллисекундах
'showed':0      // количество уже показанных окон (не надо ничего менять)
}

timer1 = ''; // служебная переменная для таймера

function showWindows() {
  // если вы хотите, чтобы первое окно появлялось без задержки, раскомментируйте следующую строку:
  // showWindow(); // это внеочередной вызов функции
 
  // запускаем функцию через каждые 3 секунды
  timer1 = window.setInterval("showWindow();", params.latency);
}


// эта функция производит отображение одного окна
function showWindow() {
  // если количество показов достигло предела
  if (params.showed >= params.num) 
	{
	// удаляем таймер и ничего больше не делаем
    window.clearInterval(timer1); 
	}
	
  // если не достигло
  else 
	{
	// текст слоя maincontainer дополняем новым "окошком"
    document.getElementById("maincontainer").innerHTML += "<div style='position:absolute; width:" + params.width + "; height:" + params.height + "; z-index:" + params.showed + "; top:" + (params.offsetY * params.showed) + "; left:" + (params.offsetX * params.showed) + "; background:yellow; border:1px solid black'>" + params.showed + "</div>"; // и выводим это окошко в браузер
	
	// а это просто дополнение - показывает количество окон в заголовке страницы
	document.title = params.showed;
	
	// и увеличиваем счётчик показанных окон на единицу
	params.showed++;
	}
}
</script>
</head>
<body onload="showWindows()">
<div id="maincontainer" style="position:absolute; top:100px; left:300px"></div>
</body>
</html>

Код немного усложнился за счёт того, что в JS нет возможности приостанавливать выполнение скрипта. Исхитряемся, как умеем.

blacks2 · Отправлено: **02:42, 24-02-2010** | #5

Сразу протестировать не смог.
Вот только что посмотрел. Отлично!
Огромное Вам спасибо!