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

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 нет возможности приостанавливать выполнение скрипта. Исхитряемся, как умеем.