Общее назначение
Данный скрипт представляет собой систему постраничной навигации с возможностью горизонтальной прокрутки. Он позволяет удобно организовать навигацию по большому количеству страниц на веб-сайте.
Основные компоненты
HTML-структура включает:
Контейнер #pageScroll для размещения элементов навигации
Внутренний элемент <span id="content"> для отображения ссылок
CSS-стилизация обеспечивает:
Оформление ссылок и кнопок навигации
Визуальное представление полосы прокрутки
Стили для активных элементов и hover-эффектов
Параметры инициализации
Функция initScrolls() принимает следующие параметры:
Количество страниц по ширине
Высота полосы прокрутки
Режим простой прокрутки (true/false)
Отображение стрелки навигации
Показ общего количества страниц
Минимальная ширина полосы
Текст для отображения количества страниц
Функциональность
Скрипт предоставляет:
Динамическое создание ссылок навигации
Плавную прокрутку между страницами
Визуальную индикацию текущей страницы
Возможность управления через мышь
Поддержку колесика прокрутки
Адаптацию под различные размеры окна
Особенности реализации
Интерактивные элементы включают:
Полосу прокрутки с возможностью перетаскивания
Активные ссылки с визуальной обратной связью
Информационное отображение общего количества страниц
Оптимизация обеспечивает:
Корректную работу в различных браузерах
Адаптацию под разные размеры экрана
Эффективное использование ресурсов
Данный скрипт может быть полезен для:
Форумов и блогов с большим количеством страниц
Каталогов товаров
Новостных порталов
Любых сайтов с пагинацией
на Главную страницу сайта после $body$ разместите данный код
Код
<style>
#pageScroll span {white-space:nowrap}
#pageScroll a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#88aa00;text-align:center;text-decoration:none;}
#pageScroll a:hover, .curPage{background:#88aa00;color:#fff !important;}
#pageScroll {margin:0 auto;overflow:hidden;position:relative;top:-3px;cursor:default}
.scrollWrap {background:#dfdfdf;position:relative}
.scrollBar {background:#777;cursor:pointer;cursor:hand;position:relative;z-index:400}
.scrollPage {background:#88aa00;position:absolute;z-index:300;}
.pagesTotal {font:12px Tahoma;color:#bbb}
#pagesBlock1, .pagesBlock1, .pagesBlockuz1 {display:none !important;}
</style>
<div id="pageScroll"><span id="content"></span></div>
<script src="/js/PageScroller.js"></script>
<script>initScrolls(5/*количество страниц по ширине*/,5/*высота бара*/,false/*простая прокрутка*/,true/*стрелка*/,true/*всего страниц*/,7/*минимальная ширина бара*/,'Всего страниц : [NUM]')</script>
#pageScroll span {white-space:nowrap}
#pageScroll a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#88aa00;text-align:center;text-decoration:none;}
#pageScroll a:hover, .curPage{background:#88aa00;color:#fff !important;}
#pageScroll {margin:0 auto;overflow:hidden;position:relative;top:-3px;cursor:default}
.scrollWrap {background:#dfdfdf;position:relative}
.scrollBar {background:#777;cursor:pointer;cursor:hand;position:relative;z-index:400}
.scrollPage {background:#88aa00;position:absolute;z-index:300;}
.pagesTotal {font:12px Tahoma;color:#bbb}
#pagesBlock1, .pagesBlock1, .pagesBlockuz1 {display:none !important;}
</style>
<div id="pageScroll"><span id="content"></span></div>
<script src="/js/PageScroller.js"></script>
<script>initScrolls(5/*количество страниц по ширине*/,5/*высота бара*/,false/*простая прокрутка*/,true/*стрелка*/,true/*всего страниц*/,7/*минимальная ширина бара*/,'Всего страниц : [NUM]')</script>
