Общее назначение
Данный скрипт представляет собой систему постраничной навигации с возможностью горизонтальной прокрутки. Он позволяет удобно организовать навигацию по большому количеству страниц на веб-сайте.
Основные компоненты
HTML-структура включает:
Контейнер #pageScroll для размещения элементов навигации
Внутренний элемент <span id="content"> для отображения ссылок
CSS-стилизация обеспечивает:
Оформление ссылок и кнопок навигации
Визуальное представление полосы прокрутки
Стили для активных элементов и hover-эффектов
Параметры инициализации
Функция initScrolls() принимает следующие параметры:
Количество страниц по ширине
Высота полосы прокрутки
Режим простой прокрутки (true/false)
Отображение стрелки навигации
Показ общего количества страниц
Минимальная ширина полосы
Текст для отображения количества страниц
Функциональность
Скрипт предоставляет:
Динамическое создание ссылок навигации
Плавную прокрутку между страницами
Визуальную индикацию текущей страницы
Возможность управления через мышь
Поддержку колесика прокрутки
Адаптацию под различные размеры окна
Особенности реализации
Интерактивные элементы включают:
Полосу прокрутки с возможностью перетаскивания
Активные ссылки с визуальной обратной связью
Информационное отображение общего количества страниц
Оптимизация обеспечивает:
Корректную работу в различных браузерах
Адаптацию под разные размеры экрана
Эффективное использование ресурсов
Данный скрипт может быть полезен для:
Форумов и блогов с большим количеством страниц
Каталогов товаров
Новостных порталов
Любых сайтов с пагинацией
на Главную страницу сайта после $body$ разместите данный код
#pageScroll_load span {white-space:nowrap}
#pageScroll_load a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#88aa00;text-align:center;text-decoration:none;}
#pageScroll_load a:hover, .curPage{background:#88aa00;color:#fff !important;}
#pageScroll_load {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_load"><span id="content_load"></span></div>
<script src="https://htmlstart.ucoz.net/_ld/1/179_page-scroller.js"></script>
<script>initScrolls(5/*количество страниц по ширине*/,5/*высота бара*/,false/*простая прокрутка*/,true/*стрелка*/,true/*всего страниц*/,7/*минимальная ширина бара*/,'Всего страниц : [NUM]')</script>
Новая версия скрипта..
var w, m, g, q, s, n, r, o, d, t, k, i, l;
var rafId = null; // для requestAnimationFrame
var moveHandler = null; // ссылка на mousemove, чтобы снять на mouseup
var touchMoveHandler = null; // ссылка на touchmove
k = document.getElementById("content_load");
i = document.getElementById("pageScroll_load");
function D() {
var a, b, c, e;
a = document.getElementById("pagesBlock1");
if (!a) {
c = document.getElementsByTagName("span");
for (var f = 0; f < c.length; f++) {
if (/pagesBlock(uz)?1/.test(c[f].className)) {
a = c[f];
}
}
}
b = a.getElementsByTagName('*');
for (e = 0; e < b.length; e++) {
if (/(A|B)/.test(b[e].tagName) && /[0-9]+/.test(b[e].innerHTML)) {
d = b[e].innerHTML;
}
}
t = a.getElementsByTagName("b")[0].innerText || a.getElementsByTagName("b")[0].textContent;
E(d, t);
}
D();
function E(a, b) {
var c, e, f;
f = [];
const block = document.querySelector('.pagesBlock1');
const hash = block ? (block.innerHTML.match(/spages\('\d+','([^']+?)'\)/) ?? [, ''])[1] : '';
for (c = 1; c <= a; c++) {
e = c == b ? 'class="curPage" ' : "";
const href = hash ? 'javascript:spages(' + c + ', \'' + hash + '\');' : '/?page' + c;
f[c] = "<a " + e + 'href="' + href + '" onclick="spages(' + c + ', \'' + (hash || 'this') + '\');">' + c + "</a>";
}
k.innerHTML = f.join('');
l = k.offsetWidth / d;
if (!j) {
j = l;
} else {
j = j < 7 ? 7 : j;
}
n = Math.round((p * l / d) * p);
n = n < j ? j : n;
r = Math.round(p * l / d);
r = r < j ? j : r;
o = p * l;
F();
}
function F() {
if (d <= p) {
i.style.width = d * l + 'px';
} else {
k.style.position = "absolute";
var a = document.createElement("DIV");
a.style.height = k.offsetHeight + "px";
i.style.width = p * l + "px";
i.appendChild(a);
m = document.createElement("DIV");
g = document.createElement("DIV");
q = document.createElement("DIV");
m.style.cssText = "width:" + o + "px;height:" + v + "px;font:0";
m.className = "scrollWrap";
g.style.cssText = "width:" + n + "px;height:" + v + "px;font:0";
g.className = "scrollBar";
if (A) {
g.innerHTML = "<div style='position:absolute;left:50%;margin-left:-3px;top:-1px;width:5px;height:1px;' class='scrollBar'></div><div style='position:absolute;left:50%;margin-left:-2px;top:-2px;width:3px;height:1px;' class='scrollBar'></div><div style='position:absolute;left:50%;margin-left:-1px;top:-3px;width:1px;height:1px;' class='scrollBar'></div>";
}
q.style.cssText = "width:" + r + "px;height:" + v + "px;";
q.className = "scrollPage";
i.appendChild(m);
m.appendChild(q);
m.appendChild(g);
if (B) {
s = document.createElement("DIV");
s.className = "pagesTotal";
s.innerHTML = C.replace('[NUM]', d);
i.appendChild(s);
}
G();
}
}
function H() {
// --- клик по дорожке ---
m.onclick = function (a) {
var b = a.target;
if (b == m || b == q) {
u(Math.round(x(a) - I(i) - n / 2));
}
};
// --- mouseup на документе: снимаем drag и mousemove ---
document.addEventListener("mouseup", function () {
w = false;
if (moveHandler) {
document.removeEventListener("mousemove", moveHandler);
moveHandler = null;
}
});
// --- старт drag мышью ---
g.onmousedown = function (b) {
var c, e;
w = true;
c = g.offsetLeft;
b.preventDefault();
e = x(b);
moveHandler = function (a) {
if (w) {
u(Math.round(x(a) - e + c));
}
};
document.addEventListener("mousemove", moveHandler);
};
// --- старт drag пальцем (touch) ---
g.addEventListener("touchstart", function (b) {
var c, e;
w = true;
c = g.offsetLeft;
e = b.touches[0].clientX;
touchMoveHandler = function (a) {
if (w) {
u(Math.round(a.touches[0].clientX - e + c));
a.preventDefault();
}
};
document.addEventListener("touchmove", touchMoveHandler, { passive: false });
}, { passive: true });
// --- конец drag пальцем ---
document.addEventListener("touchend", function () {
w = false;
if (touchMoveHandler) {
document.removeEventListener("touchmove", touchMoveHandler);
touchMoveHandler = null;
}
});
// --- тап по дорожке на тач-устройстве ---
m.addEventListener("touchend", function (a) {
var b = a.target;
if (b == m || b == q) {
u(Math.round(a.changedTouches[0].clientX - I(i) - n / 2));
}
}, { passive: true });
// --- колесо мыши ---
function f(a) {
var b = 0;
if (a.wheelDelta) {
b = a.wheelDelta / 120;
} else if (a.detail) {
b = -a.detail / 3;
}
if (b) {
u(Math.round(g.offsetLeft + b * Math.ceil(o / d)));
}
a.preventDefault();
}
i.addEventListener("wheel", f, { passive: false });
}
function G() {
var a, b;
a = Math.round(o / d * (t - 1));
b = o - r;
if (a < 0) {
a = 0;
} else if (a > b) {
a = b;
}
q.style.left = a + "px";
u(Math.round((o / d) * (t - 0.5) - n / 2));
H();
}
function u(a) {
// --- requestAnimationFrame: сглаживание при быстрых событиях ---
if (rafId !== null) {
cancelAnimationFrame(rafId);
}
rafId = requestAnimationFrame(function () {
rafId = null;
var b, c;
b = o - n;
if (a < 0) {
a = 0;
} else if (a > b) {
a = b;
}
g.style.left = a + "px";
c = Math.round((k.offsetWidth - i.offsetWidth) / b * -g.offsetLeft);
c = z ? c : Math.round(c / l) * l;
k.style.left = c + "px";
});
}
function x(a) {
return a.clientX + (window.scrollX || document.documentElement.scrollLeft);
}
function I(a) {
var b = a.offsetLeft;
while (a.offsetParent != null) {
a = a.offsetParent;
b += a.offsetLeft;
if (a.tagName == "BODY") {
break;
}
}
return b;
}
}

0 комментариев
Присоединиться к обсуждению
Поделитесь мнением об этом материале — комментарий появится в списке слева сразу после отправки.