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

Показать полную графическую версию : Как реализовать анимацию накладывающихся окон?

blacks2

21-02-2010, 17:18

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

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

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

Спасибо!

Coutty

21-02-2010, 17:59

<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

22-02-2010, 03:01

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

Coutty

22-02-2010, 08:41

Да, точно, анимация же...
<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

24-02-2010, 02:42

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