JQuery ScrollBox представляет собой легкий плагин, который позволяет прокручивать список HTML элементов (текст, изображения, и т.д. ..), как слайдер карусели или традиционной бегущей строкой.
Изображение
Особенности
  • Простой и легкий
  • Вертикальная и горизонтальная прокрутка
  • Автоматический запуск
  • Несколько экземпляров на одной странице
  • Пауза при наведении курсора
  • Настройка под себя
  • Кнопки навигации Назад / Вперед
Подключение плагина.
В разделе <head> ставите библиотеку jquery и сам плагин:

Код: Выделить всё

<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
<script src= "путь до файла/jquery.scrollbox.js" ></script>
Html структура:

Код: Выделить всё

<div id="demo">
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
Для того чтобы плагин заработал, требуется его инициализация, т.е. задать правила по которым требуется прокручивать наши элементы. Для этого после подключенного плагина добавляете:

Код: Выделить всё

<script>$('#demo').scrollbox();</script>
В этом варианте, содержимое блока будет прокручиваться по вертикали, снизу вверх. Для реализации прокрутки: по горизонтали, при наведении мыши и др. предлагаю посмотреть демо: Для использования вариантов из примеров, достаточно заменить содержимое скрипта и не забыть удалить цифру из примера $('#demo3').scrollbox({$('#demo').scrollbox({.

Если блоков на странице несколько, то добавляете к структуре свой номер <div id="demo"><div id="demo2">
Скрипт в данном случае будет выглядеть так:

Код: Выделить всё

<script>
$(function () {
$('#demo').scrollbox();
// Код для второго блока
$('#demo2').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 100
});
});
</script>
Надеюсь принцип понятен:)

Файлы:
jquery-scrollbox-master.zip
348.78 КБ 699 скачиваний
Комментарии: 13

Serg 30 янв 2015, 03:08 Сообщение

Подскажите как в 5 примере уменьшить скорость примерно в 2 раза

Код: Выделить всё

$('#demo5').scrollbox({
	direction: 'h',
	distance: 140
});
$('#demo5-backward').click(function () {
	$('#demo5').trigger('backward');
});
$('#demo5-forward').click(function () {
	$('#demo5').trigger('forward');
});
  • 0

CabinetAdmin 30 янв 2015, 15:22 Сообщение

Добавьте после $('#demo5').scrollbox({, с новой строки:

Код: Выделить всё

    startDelay: 4,
    delay: 6,
Первый, это количество секунд, после которых начнётся прокрутка.
Второй, это количество секунд между прокрутками.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

NORTH 10 фев 2015, 15:13 Сообщение

Добрый день! к сожалению - Выбранного вложения больше не существует :( .
  • 0

CabinetAdmin 10 фев 2015, 15:29 Сообщение

Перезалил. Спасибо.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

NORTH 10 фев 2015, 15:48 Сообщение

Извините пожалуйста, если мой вопрос окажется малозначимым или глупым!
Мне очень понравился пример под номером 2!
Можно ли реализовать в этой прокрутке, как "последние сообщения в темах"?

Заранее благодарю за ответ!
  • 0

CabinetAdmin 10 фев 2015, 15:59 Сообщение

Конечно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 10 фев 2015, 17:01 Сообщение

Кстати, есть тема http://cabinetadmina.ru/viewtopic.php?f=122&t=3867, скрипт как раз посвящён прокрутке тем в блоке последних сообщений. Если этот не пойдёт, можете посмотреть в сторону того скрипта.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

NORTH 10 фев 2015, 17:55 Сообщение

Я очень извиняюсь, т.к. для сайтостроения у меня программа есть, а в форум-строени я месяц без недели!
Форум готов (полностью перекрашен и сделала нужную шапку, добавила расширения, установила инфо-блок), но вот не хватает именно прокрутки, и как её вставить вообще понятия не имею, но есть предположения.....
Если Вас не затруднит, прошу не гневаться а по возможности объяснить подробнее-
На данный момент у меня- Версия phpbb 3.1.2, версия jQuery 1.11.0, стиль стоит на основе prosilver-а.
Каковы должны быть мои дальнейшие действия!?:
в корень форума я должна загрузить разархивированную папку jquery-scrollbox-master, после я должна подключить сам плагин в файле -overall_header,а вот далее Html структура и т.д.. непонятно до момента
Для использования вариантов из примеров, достаточно заменить содержимое скрипта и не забыть удалить цифру из примера $('#demo3').scrollbox({ → $('#demo').scrollbox({
, т.к блок планируется только один.

Ещё раз прошу прощение ! с Благодарностью NORTH.
  • 0

NORTH 10 фев 2015, 18:17 Сообщение

CabinetAdmin писал(а):Кстати, есть тема http://cabinetadmina.ru/viewtopic.php?f=122&t=3867, скрипт как раз посвящён прокрутке тем в блоке последних сообщений. Если этот не пойдёт, можете посмотреть в сторону того скрипта.
Благодарю, попробую -кажется мне его легче будет установить.

Анн...нет!!! ничего не получилось....
Видно придется оставить затею до лучших времен!
  • 0

CabinetAdmin 10 фев 2015, 20:10 Сообщение

С версией 3.1 всё немного сложнее. Как советуют разработчики, не нужно вносить правки в шаблоны, нужно всё реализовывать расширениями... Ну это кому как, лично я, для одной двух правок не буду городить расширение, а внесу правки сразу в шаблон.
NORTH писал(а): Благодарю, попробую -кажется мне его легче будет установить.
На странице списка форумов сверху, в правом блоке расположен список последних тем форума (Recent Topics), переработан и добавлена прокрутка, как раз тем скриптом, что по ссылке.
Если вам интересен такой вид и прокрутка, могу выложить отдельным расширением, ну или как дополнение к расширению.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

NORTH 11 фев 2015, 11:57 Сообщение

CabinetAdmin писал(а): На странице списка форумов сверху, в правом блоке расположен список последних тем форума (Recent Topics), переработан и добавлена прокрутка, как раз тем скриптом, что по ссылке.
Если вам интересен такой вид и прокрутка, могу выложить отдельным расширением, ну или как дополнение к расширению.
Добрый день!
да :Bravo: ! такая вполне подойдет !
а будет ли возможность изменить её по ширине и высоте, т.е сделать её в ширину больше, а в высоту меньше и увеличить скорость прокрутки!? Если нет! То я и этому очень рада буду!

С Благодарностью, North!
  • 0

CabinetAdmin 11 фев 2015, 15:41 Сообщение

NORTH писал(а): изменить её по ширине и высоте
Конечно, почему нет? :)

Составлю инструкцию в разделе для phpbb 3.1
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 11 фев 2015, 18:11 Сообщение

NORTH писал(а): такая вполне подойдет !
http://cabinetadmina.ru/viewtopic.php?f=149&t=4234
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы