—»     —»   Полноэкранная скользящая навигация на Javascript
  Раздел: Java-Скрипты   Нет комментариев  

Полноэкранная скользящая навигация на Javascript

Сегодня на повестке дня у нас руководство по созданию интересного элемента на javascript. Конечная страница будет содержать 16 слайдов (страниц). 4 в каждой строке, 4 колонки, а также анимированная навигация со стрелками, реализованная с помощью CSS3 (по краям окна просмотра). У нас также будет мини-навигация.

Полноэкранная скользящая навигация на Javascript

Итак, скачивайте файлы примера и давайте приступать к разработке кода!

Этап 1 - HTML-код

В нашей верстке вы можете видеть 16 «страниц» и мини-навигацию по слайдам.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen javascript Slide navigation | Script Tutorials</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>Fullscreen javascript Slide navigation</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.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</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 - JS

А теперь пришло время и javascript:

js/main.js

var navi = {
// variables
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,

// initialization
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) {
// fill-in pages array
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};

// fill-in links array
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;
}
}
},

// on resize
resize : function () {
var iCurW = this.oParent.offsetWidth; // current sizes
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // for each page
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
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() { // page onload
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
switch (event.keyCode) {
case 37: // Left key
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Right key
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};

Посмотреть демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.


Завершение

В завершении у нас получился интересный элемент! Надеемся, он понравился вам, и что вы найдете ему применение в собственных проектах! Пожалуйста, оставьте комментарий с вашими идеями или мыслями по поводу того, каким образом можно доработать этот пример! Спасибо!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 5967   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031