Порой web-мастеру хочется улучшить дизайн сайта за счет использования оригинальных, стильных и модных нововведений, которые доступны в том числе за счет использования библиотеки jQuery.

Именно о таком нововведении сейчас пойдет речь. Своя полоса прокрутки для любого сайта станет незаменимым решением для дизайна. Ведь стандартные полосы прокрутки в браузере бывают очень даже грубыми и не сочетающимися с дизайном страницы.

Поэтому мы переместимся в мир jQuery и начнем подключать стили CSS и библиотеки JavaScript.

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/jquery.rollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example1, #example2').rollbar({zIndex:80});
$('body').rollbar({zIndex:100});
});
</script>

На данном этапе ты должен разместить файлы (скачать ниже) на своем сервере, затем добавить в исходный код страницы предыдущие строки... Если у тебя уже есть библиотека jQuery, то дополнительно её подключать не нужно.

$('#example1, #example2').rollbar({zIndex:80});    ---> Эта строка отвечает за те контейнеры (dic id="example1"), к которым будет подключены полосы прокрутки.

Теперь приступим к CSS:

<link rel="stylesheet" href="/css/jquery.rollbar.css" />
<link rel="stylesheet" href="/css/style.css" />

Теперь разберем HTML код:

<div class="example">
<img src="/images/1.jpg" alt="" />
</div>

это простое изображение, к которому мы ничего не подключаем...

<div id="example1" class="example">
<img src="/images/2.jpg" alt="" />
<img src="/images/4.jpg" alt="" />
<img src="/images/3.jpg" alt="" />
</div>

к этим изображениям мы подключаем полосу прокрутки и:

<p>
<a onclick="$('#example1').trigger('rollbar',[-0.5])" href="#">&larr;</a>
<a onclick="$('#example1').trigger('rollbar',[0.5])" href="#">&rarr;</a>
</p>

стрелочки навигации.

Эти строки подгружают самое нижнее изображение с горизонтальной линией прокрутки

<div id="example2" class="example">
<img src="/images/5.jpg" alt="" />
</div>

а эти показывают стрелочки:

<p>
<a onclick="$('#example2').trigger('rollbar',[0,-0.5])" href="#">&larr;</a>
<a onclick="$('#example2').trigger('rollbar',[0,0.5])" href="#">&rarr;</a>
</p>
Rollbar

Файлы Rollbar:

Скачать Rollbar
DEMO