Порой 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="#">←</a>
<a onclick="$('#example1').trigger('rollbar',[0.5])" href="#">→</a>
</p>
стрелочки навигации.
Эти строки подгружают самое нижнее изображение с горизонтальной линией прокрутки
<div id="example2" class="example">
<img src="/images/5.jpg" alt="" />
</div>
а эти показывают стрелочки:
<p>
<a onclick="$('#example2').trigger('rollbar',[0,-0.5])" href="#">←</a>
<a onclick="$('#example2').trigger('rollbar',[0,0.5])" href="#">→</a>
</p>
