Представление контента в виде мозаики с отличным эффектом перехода между отдельными страницами.
HTML
<div id="screen"></div>
<div id="htmlBank">
<div id="txt1">
<div class="wrapper">
. . .
</div>
</div>
<div id="txt2">
<div class="wrapper">
. . .
</div>
</div>
<div id="txt3">
<div class="wrapper">
. . .
</div>
</div>
<div id="txt4">
<div class="wrapper">
. . .
</div>
</div>
<div id="txt41">
<div class="wrapper">
. . .
</div>
</div>
<div id="thumb1">
<img src="images/thu_eve04.jpg">
</div>
<div id="thumb2">
<img src="images/thu_eve05.jpg">
</div>
<div id="thumb3">
<img src="images/thu_eve02.jpg">
</div>
</div>
Элемент div screen будет использоваться кодом JavaScript для вывода на экран нашего меню. Контейнер htmlBank содержит элементы для наполнения страниц. Их положение задается в коде инициализации скрипта.
CSS
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background:#000;
}
#screen {
position: absolute;
width: 891px;
height: 550px;
016
left: 50%;
top: 50%;
margin-left:-445px;
margin-top:-275px;
background: #111;
overflow: hidden;
}
#screen .grid {
position: absolute;
background: #333;
font-size: 0px;
overflow: hidden;
}
#screen .txt {
position: absolute;
font-size: 14px;
color: #fff;
font-family: arial;
overflow: hidden;
}
#screen .menu {
position: absolute;
font-size: 12px;
color: #fff;
font-family: arial;
overflow: hidden;
cursor: pointer;
}
#screen .menubackgroundcolor {
opacity: 0.7;
filter: alpha(opacity=70);
}
#screen .wrapper {
position:absolute;
left: 2%;
top: 2%;
width: 96%;
height: 96%;
overflow: hidden;
}
#screen .wrapper img {
float: left;
margin-right: 6px;
margin-bottom: 0px;
}
#screen h1 {
position:relative;
top: 20px;
width: 100%;
text-align: center;
letter-spacing: 0px;
font-size: 1.8em;
}
#screen .menucontent {
position: absolute;
width: 100%;
text-align: center;
font-size: 128px;
letter-spacing: 0px;
font-weight: bold;
top: -10px;
}
#screen .submenucontent {
position: absolute;
width: 100%;
height: 100%;
}
#screen .submenutitle {
position: absolute;
font-size: 40px;
font-weight: bold;
}
#screen .submenu {
position: absolute;
width: 100%;
top: 55px;
}
#screen .submenuline {
position: relative;
height: 18px;
font-size: 14px;
margin-top: 1px;
}
#screen .lineover {
background: #fff;
color: #0064a0;
font-weight: bold;
}
#loader {
position:absolute;
left: 50%;
top: 50%;
width: 50px;
margin-left: -25px;
margin-top: -14px;
text-align: center;
font-family: arial;
font-size: 24px;
font-weight: bold;
color: #fff;
background: #000;
outline: #111 solid 3px;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 1000;
}
#htmlBank {
display: none;
visibility: hidden;
}
Код скрипта
var dp = function ()
{
// Локальные переменные
var object = {
cell: [],
menu: [],
text: []
},
scr, imagesPath, params, fullImage, loader,
P, Pn, Pt, lastMenuOver, pc, backgroundImage,
preload, mibar, nx, ny, nw, nh, sw, sh;
/* ===== Функция добавления элемента HTML ==== */
var appendHTML = function (p)
{
var i, object = document.createElement(p.tagName); // Создаем элемент HTML
for (i in p.attributes) object[i] = p.attributes[i]; // Копируем атрибуты
for (i in p.style) object.style[i] = p.style[i]; // Копируем стили
if (p.parentNode) p.parentNode.appendChild(object); // Вставляем объект
return object;
};
/* ===== Копируем объект JS ==== */
var clone = function (obj)
{
if (typeof(obj) != "object" || obj == null) return obj;
var newObj = obj.constructor();
for (var i in obj) newObj[i] = clone(obj[i]);
return newObj;
}
/* ==== Конструктор текста ==== */
var Text = function ()
{
// Содержание
this.div = appendHTML({
parentNode: scr,
tagName: "div",
attributes:
{
className: "txt",
onmouseover: function () { hideLastMenu(); }
}
});
this.css = this.div.style;
};
Text.prototype =
{
/* ==== Начинаем выводить текст ==== */
startTypewriter: function (t)
{
this.k = 0;
this.html = t.id ? (
document.getElementById(t.id) ?
document.getElementById(t.id).innerHTML : t.id + " undefined"
) : t.html + " ";
this.html = this.html.replace(/\n/g, "");
this.l = this.html.length;
this.css.visibility = "visible";
this.css.left = Math.round(t.x * sw) + "px";
this.css.top = Math.round(t.y * sh) + "px";
this.css.width = Math.round(t.w * sw) + "px";
this.css.height = Math.round(t.h * sh) + "px";
this.div.innerHTML = "";
// Цикл вывода текста
var self = this;
this.interval = setInterval(
function () { self.typeLoop(); }
, 32);
},
/* ==== Пропускаем тег HTML ==== */
skipTag: function()
{
if (this.html.charAt(this.k) === "<")
this.k += this.html.slice(this.k).indexOf(">") + 1;
},
/* ==== Цикл вывода текста ==== */
typeLoop: function ()
{
if (this.k <= this.l)
{
this.skipTag();
var n = this.html.slice(this.k).indexOf(" ");
this.k += (n >= 0) ? n : 1;
this.skipTag();
this.div.innerHTML = this.html.slice(0, this.k++);
}
else
{
clearInterval(this.interval);
this.interval = false;
}
}
};
/* ==== Конструктор меню ==== */
var Menu = function (n, p)
{
// Контейнер меню
this.div = appendHTML({
parentNode: scr,
tagName: "div",
attributes:
{
parent: this,
className: "menu",
onclick: function () { this.parent.click(); },
onmouseover: function () { this.parent.over(); }
},
style: { visibility: "hidden" }
});
// Цвет фона
var bgc = appendHTML({
parentNode: this.div,
tagName: "div",
attributes: { className: "menubackgroundcolor" },
style: { position: "absolute" }
});
this.bgc = bgc.style;
// Контейнер меню
this.menuDiv = appendHTML({
parentNode: this.div,
tagName: "div",
attributes:
{
parent: this,
className: "menucontent",
innerHTML: p.html,
onclick: function () { this.parent.click(); },
onmouseover: function () { this.parent.over(); }
}
});
this.css = this.div.style;
this.pageTarget = p.target;
// Конструктор подменю
if (p.submenu)
{
this.submenuDiv = appendHTML({
tagName: "div",
parentNode: this.div,
attributes: { className: "submenucontent" },
style: { visibility: "hidden" }
});
// Заголовок
if (p.submenu.title)
{
appendHTML({
parentNode: this.submenuDiv,
tagName: "div",
attributes:
{
className: "submenutitle",
innerHTML: p.submenu.title,
onclick: function () {
resetLoops();
Pt = P.text;
displayPage();
return false;
}
}
});
}
// Контейнер подменю
this.submenuContent = appendHTML({
parentNode: this.submenuDiv,
tagName: "div",
attributes: { className: "submenu" }
});
// Линия подменю
this.menuitem = [];
var i = 0, o;
while (o = p.submenu.lines[i++])
{
this.menuitem.push(
new Submenuitem(this, o)
);
}
}
};
Menu.prototype =
{
/* ==== Обработка событие over для меню ==== */
over: function ()
{
if (this.pageTarget != Pn && lastMenuOver != this)
{
hideLastMenu();
lastMenuOver = this;
this.menuDiv.style.visibility = "visible";
/* ---- Вспышка ---- */
this.c = clone(params.flash);
var self = this, k = 0;
var overflash = function ()
{
if (k++ < 12)
{
self.fadeColor(0.2);
setTimeout(overflash, 32);
}
else self.fadeColor(0);
};
overflash();
}
},
/* ==== Обработка события click для меню ==== */
click: function ()
{
var t = this.pageTarget;
if (t !== Pn && params.page[t])
{
// Новая страница
resetLoops();
Pn = t;
P = params.page[t];
Pt = P.text;
displayPage();
}
},
/* ==== Перемещение ==== */
move: function (i)
{
// Цели
this.xt = P.menuTarget[i].x;
this.yt = P.menuTarget[i].y;
this.ct = clone(P.menuBackgroundColor);
// Инициализация размеров меню
this.css.visibility = "visible";
this.css.width = this.bgc.width = Math.round(sw - 1) + "px";
this.css.height = this.bgc.height = Math.round(sh - 1) + "px";
// Видимость контента
this.menuDiv.style.visibility = (this.pageTarget === Pn) ? "visible" : "hidden";
if (this.submenuDiv) this.displayMenuitem(false);
// Цикл пермещения меню
var self = this;
this.interval = setInterval(
function () { self.moving(); }
, 32);
},
fadeColor: function (speed)
{
// Переходы
if (speed)
{
this.c.r += (this.ct.r - this.c.r) * speed;
this.c.g += (this.ct.g - this.c.g) * speed;
this.c.b += (this.ct.b - this.c.b) * speed;
}
else this.c = clone(this.ct);
// Цвет фона HTML
this.bgc.backgroundColor = "RGB("
+ Math.round(this.c.r) + ","
+ Math.round(this.c.g) + ","
+ Math.round(this.c.b) + ")";
},
/* ==== Перемещение ==== */
moving: function ()
{
// Расстояние до цели
var speed = 0;
var dx = this.xt - this.x;
var dy = this.yt - this.y;
if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01)
{
// Изменяем положение
this.x += dx * .2;
this.y += dy * .2;
speed = 0.1;
}
else
{
// Инициализация значений
this.x = this.xt;
this.y = this.yt;
// Останавливаем анимацию
clearInterval(this.interval);
// Поменю
if (this.submenuDiv && this.pageTarget === Pn)
{
// Выводим подменю
this.menuDiv.style.visibility = "hidden";
this.displayMenuitem(true);
}
}
// Обновляем HTML
this.css.left = Math.round(this.x * sw) + "px";
this.css.top = Math.round(this.y * sh) + "px";
this.fadeColor(speed);
},
/* ---- Выводим пункты меню ---- */
displayMenuitem: function (visible)
{
var i = 0, o, menuitem = this.menuitem;
while (o = menuitem[i++]) o.div.style.visibility = "hidden";
this.submenuDiv.style.visibility = "hidden";
if (visible)
{
i = 0;
this.submenuEnabled = true;
var self = this;
var displayMenuitem = function ()
{
var o = menuitem[i++];
if (o && self.submenuEnabled)
{
o.div.style.visibility = "visible";
// Дополнительные цвета
o.bar.style.background = "RGB(" +
Math.round((256 - P.menuBackgroundColor.r) * 0.25) + "," +
Math.round((256 - P.menuBackgroundColor.g) * 0.25) + "," +
Math.round((256 - P.menuBackgroundColor.b) * 0.25) + ")";
setTimeout(displayMenuitem, 64);
}
};
setTimeout(displayMenuitem, 256);
this.submenuDiv.style.visibility = "visible";
} else this.submenuEnabled = false;
}
};
/* ==== Конструкто пункта подменю ==== */
var Submenuitem = function (parent, p)
{
this.parent = parent;
this.text = p.text;
this.k = 100;
this.fullImage = p.fullImage;
this.div = appendHTML({
tagName: "div",
parentNode: parent.submenuContent,
attributes:
{
className: "submenuline",
parent: this,
onclick: function () { this.parent.click(); },
onmouseover: function () { this.parent.over(); }
}
});
this.bar = appendHTML({
tagName: "div",
parentNode: this.div,
style:
{
position: "absolute",
width: "100%",
height: "100%",
left: "100%"
}
});
this.txt = appendHTML({
tagName: "div",
parentNode: this.div,
attributes:
{
innerHTML: p.html
},
style:
{
position: "absolute",
marginLeft: "10px"
}
});
};
/* ---- Функции пунктов меню ---- */
Submenuitem.prototype =
{
/* ---- Выбор ---- */
click: function ()
{
resetLoops();
resetText();
Pt = this.text;
if (this.fullImage)
{
// Выводим полноразмерное изображение
fullImage = this.fullImage;
displayPage();
}
// Обновляем текст
else nextText();
},
/* ---- Полоска слева ---- */
over: function ()
{
mibar = this;
var i = 0, o;
while (o = this.parent.menuitem[i++]) if (o != this && !o.r) o.out();
var self = this;
this.r = false;
var barLeft = function ()
{
if (self === mibar)
{
self.bar.style.left = Math.round(self.k *= .25) + "%";
if (Math.round(self.k) > 0) setTimeout(barLeft, 32);
}
};
barLeft();
},
/* ---- Полоска справа ---- */
out: function ()
{
if (this.k < 100)
{
if (this.k < 1) this.k = 1;
var self = this;
this.r = true;
var barRight = function ()
{
self.bar.style.left = Math.round(self.k *= 2) + "%";
if (Math.round(self.k) < 100) setTimeout(barRight, 32);
};
barRight();
}
}
};
/* ==== Конструктор ячейки ==== */
var Cell = function (n, x, y)
{
this.n = n;
this.x0 = x;
this.y0 = y;
// Следующее направление
this.dir = [
(x - 1 >= 0 ? n - ny : n),
(x + 1 < nx - 1 ? n + ny : n),
(y - 1 >= 0 ? n - 1 : n),
(y + 1 < ny - 1 ? n + 1 : n)
];
// Плавный вывод/убирание элемента div
this.opc = appendHTML({
parentNode: scr,
tagName: "div",
attributes:
{
onmouseover: function () { hideLastMenu(); }
},
style:
{
position: "absolute",
filter: "alpha(opacity=100)",
opacity: 1,
background: "#000",
left: Math.round(x * sw) + "px",
top: Math.round(y * sh) + "px",
width: Math.round(sw - 1) + "px",
height: Math.round(sh - 1) + "px"
}
});
// Элемент div белой вспышки
this.fla = appendHTML({
parentNode: scr,
tagName: "div",
style:
{
position: "absolute",
background: "#fff",
visibility: "hidden",
left: Math.round(x * sw) + "px",
top: Math.round(y * sh) + "px",
width: Math.round(sw - 1) + "px",
height: Math.round(sh - 1) + "px"
}
});
// Сетка горизонтальная
if (x == 0 && y > 0)
{
this.hor = appendHTML({
parentNode: scr,
tagName: "div",
attributes: { className: "grid" },
style:
{
top: Math.round(y * sh - 1) + "px",
width: nw + "px",
height: "1px"
}
});
}
// Сетка вертикальная
if (y == 0 && x > 0)
{
this.ver = appendHTML({
parentNode: scr,
tagName: "div",
attributes: { className: "grid" },
style:
{
left: Math.round(x * sw - 1) + "px",
width: "1px",
height: nh + "px"
}
});
}
};
Cell.prototype =
{
/* ==== Функция поддержки прозрачности в разных браузерах ==== */
opacity: function (alpha)
{
if (this.opc.filters && this.opc.filters.alpha)
{
// Переопределяем функцию для IE<9
Cell.prototype.opacity = function (alpha)
{
this.opc.filters.alpha.opacity = Math.round(alpha);
};
this.opacity(alpha);
}
else
{
// Переопределяем функцию для CSS3
Cell.prototype.opacity = function (alpha)
{
this.opc.style.opacity = alpha * 0.01;
};
this.opacity(alpha);
}
},
/* ==== Выводим изображение ==== */
displayCell: function ()
{
// mОтмечаем ячейку как выведенную
this.displayed = true;
// Вспышка
this.fla.style.visibility = "visible";
// Цикл затемнения
var self = this;
this.interval = setInterval(
function () { self.displayCellLoop(); }
, 32);
},
/* ==== Цикл вывода ячейки ==== */
displayCellLoop: function ()
{
var o;
if (this.alpha !== this.alphaTarget)
{
// Прозрачность
this.alpha += this.step;
this.opacity(this.alpha);
// Ищем следующую ячейку
if (this.alpha === this.nextCell)
{
var i = 0,
s = false;
while (i++ < 8)
{
o = object.cell[
this.dir[Math.floor(Math.random() * 4)]
];
// Ячейка доступна
if (!o.displayed)
{
o.displayCell();
s = true;
break;
}
}
if (!s)
{
// Находим новую стартовую точку
o = startingCell();
if (o !== false) o.displayCell(); // Следующая ячейка
else this.startNext = true; // Конец
}
}
// Останавливаем вспышку
if (this.alpha === this.endFlash) this.fla.style.visibility = "hidden";
if (this.startNext && this.alpha === this.nextStep)
{
// Запускаем вывод текста
if (this.txt && (this.id || this.html)) object.text[pc].startTypewriter(this);
// Следующая фаза
if (P.text[pc] && !fullImage) nextText();
}
}
else
{
// Останавливаем цикл анимации
clearInterval(this.interval);
this.interval = false;
this.fla.style.visibility = "hidden";
}
}
};
/* ==== Возвращаем случайную доступную ячейку ==== */
var startingCell = function ()
{
var o, i = 0, avail = [];
while (o = object.cell[i++]) if (!o.displayed) avail.push(o);
if (!avail.length) return false; // Нет доступных ячеек
else
{
// Возвращаем случайную доступную ячейку
return avail[
Math.floor(Math.random() * avail.length)
];
}
};
/* ==== Инициализируем ячейки ==== */
var initCell = function (p, fx, txt)
{
var i = 0, o;
while (o = object.cell[i++])
{
// Ячейка активна
if (o.x0 >= p.x && o.x0 <= (p.x + p.w - 1) &&
o.y0 >= p.y && o.y0 <= (p.y + p.h - 1))
{
// Копируем перменные
o.displayed = false;
o.startNext = false;
o.id = false;
o.txt = txt;
for (var j in p) o[j] = p[j];
for (var k in fx) o[k] = fx[k];
}
}
};
/* ==== Сброс текста ==== */
var resetText = function ()
{
// Сброс контейнера текста
pc = 0;
var i = 0, o;
while (o = object.text[i++])
{
o.div.innerHTML = "";
o.css.visibility = "hidden";
}
// Сброс прозрачности
i = 0;
while (o = object.cell[i++])
{
o.t = true;
o.opacity(0);
}
};
/* ==== Выводим следующий блок текста ==== */
var nextText = function ()
{
var o = Pt[pc++];
if (o)
{
initCell(o, params.fadeout, true);
o = startingCell();
o.displayed = true;
o.displayCell();
}
};
/* ==== Курсор мыши покинул меню ==== */
var hideLastMenu = function ()
{
if (lastMenuOver)
{
lastMenuOver.menuDiv.style.visibility = "hidden";
lastMenuOver = false;
}
};
/* ==== Сброс setInterval ==== */
var resetLoops = function ()
{
if (preload) {
clearInterval(preload);
preload = false;
}
var i, j, k, o;
for (j in object)
{
k = object[j];
i = 0;
while (o = k[i++])
{
if (o.interval)
{
// Останавливаем цикл
clearInterval(o.interval);
o.interval = false;
// Останавливаем вспышку
if (o.fla) o.fla.style.visibility = "hidden";
}
}
}
};
/* ==== Последовательность вывода изображений ==== */
var displayPage = function ()
{
var i, j, m, o;
// сброс
lastMenuOver = false;
resetText();
if (!fullImage)
{
// Перемещаем меню
i = 0;
while (o = object.menu[i]) o.move(i++);
// Фоновые изображения
var img = P.backgroundImage;
}
else
{
// Полноразмерное изображение
var img = fullImage;
// Скрываем меню
i = 0;
while (o = object.menu[i++]) o.css.left = "-1000px";
}
// Предварительная загрузка изображения
var timeout = params.timeout;
var preloadImg = new Image();
preloadImg.src = imagesPath + img;
/* ---- Функция загрузки ---- */
var preloading = function ()
{
if ((preloadImg.complete && preloadImg.width) || timeout === 0)
{
// Загрузка завершена - скрываем индикатор загрузки
loader.innerHTML = "";
loader.style.visibility = "hidden";
// Скрываем изображение
var i = 0, o;
while (o = object.cell[i++])
{
o.opacity(100);
if (fullImage)
{
// Закрываем полноразмерное изображение
o.opc.style.cursor = "pointer";
o.opc.onclick = function ()
{
resetLoops();
fullImage = false;
Pt = P.text;
displayPage();
}
}
else
{
o.opc.style.cursor = "default";
o.opc.onclick = null;
}
}
// Выводим фоновое изображение
var css = backgroundImage.style;
if (timeout > 0)
{
backgroundImage.src = imagesPath + img;
css.left = Math.round((nw - preloadImg.width) * 0.5) + "px";
css.top = Math.round((nh - preloadImg.height) * 0.5) + "px";
css.visibility = "visible";
}
else css.visibility = "hidden";
setTimeout(function() {
// Выводим изображение
initCell(
{
x: 0,
y: 0,
w: nx,
h: ny
},
params.fadein, false
);
// случайная точка старта
o = startingCell();
o.displayed = true;
o.displayCell();
}, 64);
}
else
{
// Ждем
timeout--;
if (timeout < params.timeout - 3)
{
// Выводим индикатор загрузки
loader.style.visibility = "visible";
loader.innerHTML = (params.timeout - timeout - 3);
}
preload = setTimeout(preloading, 64);
}
};
preloading();
};
////////////////////////////////////////////////////////////////////////////
/* ==== Размеры экрана ==== */
var resize = function ()
{
nw = scr.offsetWidth;
nh = scr.offsetHeight;
sw = Math.round(nw / nx);
sh = Math.round(nh / ny);
};
/* ==== Инициализация скрипта ==== */
var init = function (p)
{
var k, i, j, o;
params = p;
scr = document.getElementById(p.containerID);
nx = p.gridX;
ny = p.gridY;
imagesPath = p.imagesPath;
Pn = 0;
P = p.page[Pn];
Pt = P.text;
resize();
// создаем фоновое изображение
backgroundImage = appendHTML({
parentNode: scr,
tagName: "img",
style:
{
position: "absolute",
visibility: "hidden"
}
});
// Индикатор загрузки
loader = appendHTML({
parentNode: scr,
tagName: "div",
attributes: { id: "loader" },
style: { visibility: "hidden" }
});
// Создаем ячейки
k = 0;
for (i = 0; i < nx; i++)
{
for (j = 0; j < ny; j++)
{
object.cell.push(
new Cell(k++, i, j)
);
}
}
// Создаем объекты текста
for (i = 0; i < 6; i++)
{
object.text.push(
new Text()
);
}
// Создаем объекты меню
i = 0;
while (o = p.menu[i])
{
object.menu.push(
new Menu(i++, o)
);
}
// Загружаем первую страницу
setTimeout(
function () { displayPage(); }
, 250);
};
return {
// Инициализируем скрипт
init : init
}
}();
Код инициализации скрипта
setTimeout(function ()
{
dp.init(
{
containerID: "screen", // Элемент, в который будет выводиться информация
gridX: 6, // Размерность сетки по оси X
gridY: 4, // Размерность сетки по оси Y
imagesPath: "images/", // Папка с изображениями
timeout: 153,
flash: { r: 255, g: 255, b: 255}, // Цвет вспышки
fadein: // Параметры вывода ячейки
{
alpha: 100,
alphaTarget: 0,
step: -5,
endFlash: 80,
nextCell: 90,
nextStep: 0,
},
fadeout: // Параметры скрытия ячейки
{
alpha: 0,
alphaTarget: 60,
step: 5,
endFlash: 20,
nextCell: 10,
nextStep: 40,
},
menu: [ // Настройки пунктов меню
{
html: '1', // Код будет выводиться на экран
target: 0 // Целевая страница
},
{
html: '2',
target: 1,
submenu: { // Настройки подменю
title: 'Состав', // Название
lines: [
{
html: 'Разведка', // Название пункта
text: [{
html: '', //Выводимый текст
x: 0, y: 2, w: 5, h: 1 // Параметры вывода текста
},
{
id: "thumb1", // Выводимый элемент
x: 2, y: 0, w: 1, h: 4 // Параметры вывода элемента
}]
},
{
html: 'Планирование',
text: [{
html: ' ',
x: 4, y: 0, w: 1, h: 4
},
{
id: "thumb2",
x: 0, y: 2, w: 5, h: 1
}]
},
{
html: 'Управление',
text: [{
html: ' ',
x: 2, y: 0, w: 1, h: 4
},
{
html: ' ',
x: 4, y: 0, w: 1, h: 4
},
{
id: "thumb3",
x: 2, y: 1, w: 3, h: 2
}]
},
{
html: 'Командный центр',
fullImage: "eve06.jpg" // Выводим изображение на весь экран
}
]
}
},
{
html: '3',
target: 2
},
{
html: '4',
target: 3
}
],
page: [ // Описание страниц
{ // Страница 1
backgroundImage: "eve01.jpg", // Фоновое изображение
menuBackgroundColor: { r: 0, g: 100, b: 160 }, // Цвет фона пунктов меню
text: [ // Выводим текст
{
html: ' ',
x: 0, y: 2, w: 2, h: 2
},
{
id: "txt1", // Указываем используемы элемент
x: 4, y: 1, w: 2, h: 2 // Параметры вывода
},
{
html: '<h1>Крейсер</h1>',
x: 4, y: 3, w: 1, h: 1
}
],
menuTarget: [ // Расположение пунктов меню на странице
{ x: 0, y: 0 },
{ x: 1, y: 1 },
{ x: 0, y: 3 },
{ x: 5, y: 3 }
]
},
{ // Страница 2
backgroundImage: "eve02.jpg",
menuBackgroundColor: { r: 102, g: 102, b: 51 },
text: [{
html: ' ',
x: 5, y: 3, w: 1, h: 1
},
{
html: ' ',
x: 0, y: 3, w: 1, h: 1
},
{
id: "txt2",
x: 0, y: 0, w: 3, h: 2
},
{
html: '<h1>Интегратор</h1>',
x: 5, y: 0, w: 1, h: 1
}
],
menuTarget: [
{ x: 3, y: 0 },
{ x: 1, y: 3 },
{ x: 3, y: 3 },
{ x: 5, y: 2 }
]
},
{ // Страница 3
backgroundImage: "eve03.jpg",
menuBackgroundColor: { r: 160, g: 100, b: 0 },
text: [{
html: ' ',
x: 0, y: 0, w: 1, h: 1
},
{
html: ' ',
x: 5, y: 0, w: 1, h: 1
},
{
id: "txt3",
x: 2, y: 1, w: 3, h: 2
},
{
html: '<h1>Яхта</h1>',
x: 5, y: 2, w: 1, h: 1
}
],
menuTarget: [
{ x: 1, y: 0 },
{ x: 1, y: 2 },
{ x: 5, y: 3 },
{ x: 5, y: 1 }
]
},
{ // Страница 4
backgroundImage: "eve04.jpg",
menuBackgroundColor: { r: 0, g: 150, b: 150 },
text: [{
id: "txt41",
x: 0, y: 3, w: 2, h: 1
},
{
id: "txt4",
x: 4, y: 2, w: 2, h: 2
},
{
html: '<h1>Флот</h1>',
x: 3, y: 3, w: 1, h: 1
}
],
menuTarget: [
{ x: 2, y: 0 },
{ x: 1, y: 0 },
{ x: 2, y: 3 },
{ x: 5, y: 0 }
]
}]
});
}, 500);