В данном уроке представлена галерея полноэкранных изображений (16 слайдов). Все изображения составлены в огромное поле 4х4. Навигация осуществляется с помощью миниатюрной карты, на которой можно выбрать нужный участок галереи, или с помощью стрелок на изображениях. Переход между изображениями выполняется плавным скольжением.
Шаг 1. Разметка HTML
В разметке представлены 16 слайдов и миниатюрная карта навигации.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Полно экранная проскальзывающая навигация на JavaScript | Материалы сайта RUSELLER.COM</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="pages">
<div id="page1">
<a href="#page2" class="go right"></a>
<a href="#page5" class="go bottom"></a>
</div>
<div id="page2">
<a href="#page1" class="go left"></a>
<a href="#page3" class="go right"></a>
<a href="#page6" class="go bottom"></a>
</div>
<div id="page3">
<a href="#page2" class="go left"></a>
<a href="#page4" class="go right"></a>
<a href="#page7" class="go bottom"></a>
</div>
<div id="page4">
<a href="#page3" class="go left"></a>
<a href="#page8" class="go bottom"></a>
</div>
<div id="page5">
<a href="#page1" class="go top"></a>
<a href="#page6" class="go right"></a>
<a href="#page9" class="go bottom"></a>
</div>
<div id="page6">
<a href="#page5" class="go left"></a>
<a href="#page2" class="go top"></a>
<a href="#page7" class="go right"></a>
<a href="#page10" class="go bottom"></a>
</div>
<div id="page7">
<a href="#page6" class="go left"></a>
<a href="#page3" class="go top"></a>
<a href="#page8" class="go right"></a>
<a href="#page11" class="go bottom"></a>
</div>
<div id="page8">
<a href="#page7" class="go left"></a>
<a href="#page4" class="go top"></a>
<a href="#page12" class="go bottom"></a>
</div>
<div id="page9">
<a href="#page5" class="go top"></a>
<a href="#page10" class="go right"></a>
<a href="#page13" class="go bottom"></a>
</div>
<div id="page10">
<a href="#page9" class="go left"></a>
<a href="#page6" class="go top"></a>
<a href="#page11" class="go right"></a>
<a href="#page14" class="go bottom"></a>
</div>
<div id="page11">
<a href="#page10" class="go left"></a>
<a href="#page7" class="go top"></a>
<a href="#page12" class="go right"></a>
<a href="#page15" class="go bottom"></a>
</div>
<div id="page12">
<a href="#page11" class="go left"></a>
<a href="#page8" class="go top"></a>
<a href="#page16" class="go bottom"></a>
</div>
<div id="page13">
<a href="#page9" class="go top"></a>
<a href="#page14" class="go right"></a>
</div>
<div id="page14">
<a href="#page13" class="go left"></a>
<a href="#page10" class="go top"></a>
<a href="#page15" class="go right"></a>
</div>
<div id="page15">
<a href="#page14" class="go left"></a>
<a href="#page11" class="go top"></a>
<a href="#page16" class="go right"></a>
</div>
<div id="page16">
<a href="#page15" class="go left"></a>
<a href="#page12" class="go top"></a>
</div>
</div>
<div id="nav">
<div>Полноэкранная проскальзывающая навигация на JavaScript</div>
<div style="width:130px">
<a href="#page1" class="go"></a>
<a href="#page2" class="go"></a>
<a href="#page3" class="go"></a>
<a href="#page4" class="go"></a>
<a href="#page5" class="go"></a>
<a href="#page6" class="go"></a>
<a href="#page7" class="go"></a>
<a href="#page8" class="go"></a>
<a href="#page9" class="go"></a>
<a href="#page10" class="go"></a>
<a href="#page11" class="go"></a>
<a href="#page12" class="go"></a>
<a href="#page13" class="go"></a>
<a href="#page14" class="go"></a>
<a href="#page15" class="go"></a>
<a href="#page16" class="go"></a>
</div>
<div><a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a></div>
</div>
</div>
</body>
</html>
Шаг 2. CSS
Теперь зададим стили для нашей страницы:
css/layout.css
*{
margin:0;
padding:0;
}
body {
background-color:#aaa;
color:#fff;
font:16px Arial,sans-serif;
font-weight:700;
margin:0px;
padding:0px;
background:#111;
width:100%;
height:100%;
}
a.stuts,a.stuts:visited{
color: #FCFCFC;
font-size: 14px;
text-decoration: none;
}
.stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
position: absolute;
left: 0;
top: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
}
#pages {
left:0;
position:absolute;
top:0;
}
#nav {
background-color:rgba(0, 0, 0, 0.8);
margin:0;
outline:#333 solid 1px;
padding:10px;
position:fixed;
right:200px;
top:50px;
width:200px;
}
#nav div a.go {
background:#333;
float:left;
height:25px;
margin:3px;
overflow:hidden;
text-decoration:none;
width:25px;
}
#nav div a.go:visited,#nav div a.visited {
background-color:#666;
}
#nav div a.go:active,#nav div a.active {
background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
background-color:#00f;
}
#pages > div {
height:1100px;
position:absolute;
width:1700px;
}
#page1 {
background:url(../images/1.jpg) no-repeat center center;
left:0;
top:0;
}
#page2 {
background:url(../images/2.jpg) no-repeat center center;
left:1800px;
top:0;
}
#page3 {
background:url(../images/3.jpg) no-repeat center center;
left:3600px;
top:0;
}
#page4 {
background:url(../images/4.jpg) no-repeat center center;
left:5400px;
top:0;
}
#page5 {
background:url(../images/5.jpg) no-repeat center center;
left:0;
top:1300px;
}
#page6 {
background:url(../images/6.jpg) no-repeat center center;
left:1800px;
top:1300px;
}
#page7 {
background:url(../images/7.jpg) no-repeat left center;
left:3600px;
top:1300px;
}
#page8 {
background:url(../images/8.jpg) no-repeat center center;
left:5400px;
top:1300px;
}
#page9 {
background:url(../images/9.jpg) no-repeat center center;
left:0;
top:2600px;
}
#page10 {
background:url(../images/10.jpg) no-repeat center center;
left:1800px;
top:2600px;
}
#page11 {
background:url(../images/11.jpg) no-repeat center center;
left:3600px;
top:2600px;
}
#page12 {
background:url(../images/12.jpg) no-repeat center center;
left:5400px;
top:2600px;
}
#page13 {
background:url(../images/13.jpg) no-repeat center center;
left:0;
top:3900px;
}
#page14 {
background:url(../images/14.jpg) no-repeat center center;
left:1800px;
top:3900px;
}
#page15 {
background:url(../images/15.jpg) no-repeat center center;
left:3600px;
top:3900px;
}
#page16 {
background:url(../images/16.jpg) no-repeat center center;
left:5400px;
top:3900px;
}
#pages .left {
border-bottom:transparent solid 50px;
border-right:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
left:20px;
position:absolute;
top:50%;
width:0;
}
#pages .right {
border-bottom:transparent solid 50px;
border-left:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
position:absolute;
right:20px;
top:50%;
width:0;
}
#pages .top {
border-bottom:#FFF solid 80px;
border-left:transparent solid 50px;
border-right:transparent solid 50px;
height:0;
left:50%;
position:absolute;
top:20px;
width:0;
}
#pages .bottom {
border-left:transparent solid 50px;
border-right:transparent solid 50px;
border-top:#FFF solid 80px;
bottom:20px;
height:0;
left:50%;
position:absolute;
width:0;
}
#pages .left:hover {
border-right:red solid 80px;
}
#pages .right:hover {
border-left:red solid 80px;
}
#pages .top:hover {
border-bottom:red solid 80px;
}
#pages .bottom:hover {
border-top:red solid 80px;
}
#nav > div {
margin:10px auto;
overflow:hidden;
text-align:center;
}
Шаг 3. JavaScript
И осталось задать функционал нашего проекта.
js/main.js
var navi = {
// Переменные
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,
// Инициализация
init : function (aParams) {
this.oPages = document.getElementById(aParams.pages_id);
this.oParent = document.getElementById(aParams.parent_id);
var aAEls = this.oParent.getElementsByTagName('a');
var i = 0; var p = null;
while (p = aAEls[i++]) {
if (p.className && p.className.indexOf('go') >= 0) {
var sHref = p.href.split('#')[1];
var oDst = document.getElementById(sHref);
if (oDst) {
// Заполняем масив страниц
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};
// Заполняем массив ссылок
this.aLinks.push({a: p, oObj: oDst});
p.onclick = function () {
navi.goto(this.href.split('#')[1], aParams.duration);
return false;
}
}
}
}
this.resize();
if ('onhashchange' in window) {
if (location.hash !== '' && location.hash !== '#') {
this.sOldH = location.hash.substring(1);
this.goto(this.sOldH, -1);
} else
this.goto('page1', -1);
this.bHash = true;
window.onhashchange = function() {
if (location.hash.substring(1) !== navi.sOldH) {
navi.sOldH = location.hash.substring(1);
if (navi.sOldH == '') {
navi.bUpdateH = false;
}
navi.goto(navi.sOldH, aParams.duration);
}
return false;
}
}
},
// Изменение размера
resize : function () {
var iCurW = this.oParent.offsetWidth; // Текущий размер
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // Для каждой страницы
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // Новые размеры
var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight);
oPage.oObj.style.left = iNewX + 'px';
oPage.oObj.style.top = iNewY + 'px';
oPage.oObj.style.width = iCurW + 'px';
oPage.oObj.style.height = iCurH + 'px';
oPage.iXPos = -iNewX;
oPage.iYPos = -iNewY;
if (this.sCurPage)
this.goto(this.sCurPage, -1);
}
},
goto : function (sHref, iDur) {
this.tween.iStart = new Date() * 1;
this.tween.iDur = iDur;
this.tween.fromX = this.oPages.offsetLeft;
this.tween.fromY = this.oPages.offsetTop;
this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX;
this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY;
this.sTargPage = sHref;
if (! this.bRunning)
this.bRunning = window.setInterval(this.animate, 24);
},
animate : function () {
var iCurTime = (new Date() * 1) - navi.tween.iStart;
if (iCurTime < navi.tween.iDur) {
var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
} else {
navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
window.clearInterval(navi.bRunning);
navi.bRunning = false;
navi.sCurPage = navi.sTargPage;
var i = 0; var p = null;
while (p = navi.aLinks[i++]) {
if (p.oObj.id == navi.sCurPage) {
if (p.a.className.indexOf('visited') >= 0 ) {
p.a.className = p.a.className.replace('visited', 'active');
} else p.a.className += ' active';
p.visited = true;
} else if (p.visited) {
p.a.className = p.a.className.replace('active', 'visited');
}
}
if (navi.bHash) {
if (navi.bUpdateH) {
navi.sOldH = navi.sCurPage;
window.location.hash = navi.sCurPage;
}
navi.bUpdateH = true;
}
}
}
}
window.onload = function() { // Загрузка страницы
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // Испозуем клавиатуру
switch (event.keyCode) {
case 37: // Клавиша "влево"
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Клавиша "вправо"
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};
Готово!