Мозаичное меню

Представление контента в виде мозаики с отличным эффектом перехода между отдельными страницами.

demosourse

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;
	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);

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: htmldrive.net/items/show/857/awesome-Mosaic-menu.html
Перевел: Сергей Фастунов
Урок создан: 3 Марта 2011
Просмотров: 35211
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Марта 2011 15:16
    Zedamin
    Жесть. Круто. Но все таки согласен с profesor08, лучше бы сделали урок "Генератор кода CSS для 3D лент", а это в поместили в блок "Новые файлы".
  • 3 Марта 2011 15:24
    hitman4uk
    Народ поделитесь знаниями! Как создать прогресс бар при нажатии на кнопку/ссилку....
    • 4 Марта 2011 15:58
      Constantine
      http://www.quizful.net/post/progressbar_with_jquery
  • 3 Марта 2011 15:41
    Руслан Димитриев
    Столько мороки...
  • 3 Марта 2011 15:58
    truehazard
    как то оно всё скачет прыгает, как то не очень
  • 3 Марта 2011 16:46
    mikfake
    Ради картинок посмотрю:)...
  • 3 Марта 2011 17:01
    ruslan_eset
    Очень круто, радуют такие вещи, которые не отличишь от флеша.
  • 3 Марта 2011 17:22
    AntiBuger
    Смотрится классно. И в правду как flash. урок был бы еще ценен если бы он был объяснен лучше.
  • 3 Марта 2011 17:45
    Антон Буреш
    Нрава )))
  • 3 Марта 2011 18:05
    MopuC
    Признайтесь честно, кто хотя бы прочитал весь код, не говорю о понимании? )
  • 3 Марта 2011 18:25
    xand
    Шикарно смотрится ! :)
  • 3 Марта 2011 19:58
    Constantine
    Не понимаю, зачем пятьдесят девять раз спрашивать "почему не объясняете"?
  • 3 Марта 2011 21:57
    Slavoz
    О Господи!!!! Зачем так мучиться? На флеше все в 100 раз быстрее!!!
    • 4 Марта 2011 14:43
      kindofbear
      а сколько флешу остается жить в сфере создания web-сайтов? не баннеров и игр, а сайтов
    • 4 Марта 2011 15:32
      rubyx
      Да и "флешь" у некоторых браузеров не быстрый... примеру Chrome (который имеет встроенный свой флешь) на пень4 2.4Гц, 1Гб оп.памяти, nVidia g.f. fx 5200 видео карта. так прото флешь работает на этом ьраузере слайдами... :))
  • 4 Марта 2011 01:16
    xzza
    Красиво однозначно)
  • 4 Марта 2011 04:49
    art_reklama_com
    Юзабилити минус 100. Это как в супермаркетах товары переставляют, чтобы трудно найти было что тебе нужно) Красота - не всегда самое главное. Тем более что отдает началом 2000-х
  • 4 Марта 2011 07:04
    designf
    А мне так очень понравилось.
  • 4 Марта 2011 12:31
    ppaull
    Смотрится красиво, но я бы на сайт такое никогда не поставил. Посетителю тяжело ориентироваться в таком меню.
  • 4 Марта 2011 14:47
    kindofbear
    красиво,но использовать не буду)зато текст понравился,прочел весь.улыбнуло)
  • 4 Марта 2011 15:19
    antoxa_e
    Круто!
  • 4 Марта 2011 15:40
    rubyx
    Нравиться, так что я повожуся с этой мозаикой ради такого-же интереса.
  • 4 Марта 2011 19:20
    p0staltomsk
    Глючно, но Классно!
  • 4 Марта 2011 20:20
    vdnovik
    Классная вещь для сайта технического изделия. Применю обязательно. И очень скоро ))) Но чтой-то у меня исходник в HOME SITE не вскрывается :((... Ругань идет об строке 1134. Может кто окажет помощь?
  • 4 Марта 2011 21:31
    Александр Головизнин
    супер!!! вот это НОВЫЕ ТЕХНОЛОГИИ!!!
  • 10 Марта 2011 23:43
    Ygreec
    Эффектно, но юзабилити...
  • 30 Марта 2011 11:26
    scct_versus
    блин, такое хорошее меню, создать бы что то свое похожее на это, только понять никак не могу как оно работает
  • 6 Апреля 2011 11:58
    web1plus
    Мне понравилось, но только в ИЕ8 получил много матюков и предложений позагружать разных программ. в Opera и FireFox таких проблем нет - все отлично. сыроват немного...
  • 7 Июня 2011 01:35
    VeyDlin
    По-моему вот источник http://www.dhteumeuleu.com/ologons-talantis/
  • 19 Августа 2011 10:24
    VL404ne
    Помогите пожалуйста! Как изменить пункты меню(1,2,3,4) на свои.ЗАРАНЕЕ БЛАГОДАРЮ
  • 19 Августа 2011 11:13
    VL404ne
    Люди помогите! Очень надо!! Как изменить пункты меню(1,2,3,4) на свои? Срочно!
  • 10 Июня 2015 00:00
    TashaMille
    выглядит офигенно но чувствую что реализовывать тяжеловато с голого листа
  • Комментарий удален
    • 3 Марта 2011 20:16
      profesor08
      В книгах много ненужной болтавни. По HTML есть издания по нескольку томов, но полезного оттуда выненсеш пару страниц.(Полезное - то с чем постоянно сталкиваешься)
      • 4 Марта 2011 12:20
        kalisto
        Согласна с profesor08. Правда в том, что мы все разные... и угодить каждому из нас - это не 1 кг меда слопать...
      • 4 Марта 2011 14:45
        kindofbear
        в книгах тонна обычно ошибочной и устаревшей информации.бог мой, когда у нас учебники по спецификации html 4.0 оказались,я взгрустнул
        • 4 Марта 2011 15:38
          rubyx
          я учился разбирая "хтмл" сам без книг совсем)) просто было интересно "а что там внутри?" и при помощи текстового блокнота я их и разбирал... Смешно наверно будет:) но факт.
          • 4 Марта 2011 20:28
            vdnovik
            Вы, как мне кажется, вообще любите головоломки. Это такая потребность для головы. Я вас понимаю ))).
            • 5 Марта 2011 17:48
              rubyx
              "головоломка" это путь к развитию мозгов, будь хоть простая сборка картинки из нарезанного картона :)) а так-же полезны грецкие орехи напоминающие мозг :)))
          • 4 Марта 2011 21:13
            kindofbear
            не смешно) я именно так и учился всему,это уже потом статьи и остальное...
            • 5 Марта 2011 17:45
              rubyx
              Думаю так каждый начинал кому интересно было "а что там внутри?" :)) Щас для этого всего куча всяких программ и сайтов. :)
^ Наверх ^