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

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

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

Доброе время суток

Подскажите пожалуйста идейки как просто реализовать следующую штучку:
- нужно создать эффект всплывающих окон одно над другим со смещением - как ошибки в винде одна над другой
- окна 300х300px
- окна одинакового содержания (в основном background image)

Смею предположить что можно создать div с id и javascript'том открыть н'ое к-во окон...
Но я не знаю javascript :) - нужны примеры :/
Возможно есть другие решения, идеи.

Спасибо!

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 задают различные параметры отображения последовательно:
ширина - высота - количество - сдвиг по горизонтали относительно предыдущего - сдвиг по вертикали

Цитата:

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

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