Новости

Создаём стильный скроллер на jquery

В последнее время очень часто шаблоны сайтов немного меняют свои стереотипы.
Всем уже надоели трёх - двух колоночные, резиновые макеты. Очень красиво получается шаблон на фоне какого-нибудь коллажа.

В связи с этим возникает вопрос, а как же быть тогда блоку с контентом, если фон фиксированый и не может повторяться ? Естественно же воспользоваться полосой прокрутки для этого блока с текстом.

Стандартный вид скроллера не очень то нас интересует. Рассмотрим как же всё - таки, как сделать стильный скроллер для сайта.

Шаг 1: Скачиваем библиотеку jquery 1.4.2

Шаг 2: Скачиваем jquery скрипт

Шаг 3: Подключаем эти скрипты, дописываем в код нашей страницы следующее (не забудьте изменить путь к скриптам, если он у вас поменяется):

Code
<script type="text/javascript" src="css/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="css/flexcroll.js"></script>


Шаг 4: Теперь зададим нашему блоку, для которого мы делаем скроллер, класс и ид:

Code
<div id="mycustomscroll" class="flexcroll">
Код содержимого блока
</div>

Шаг 5: Прописываем стили для скроллера (стили можно отредактировать под себя: высоту, ширину и так далее):

Code
#mycustomscroll { position: relative; margin: 0 auto;width:450px;height:650px;overflow-y:scroll;padding-left:20px;padding-right:20px;}
.scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; }
.vscrollerbase, .vscrollerbar { width: 19px;}
.hscrollerbase, .hscrollerbar { height: 19px; }
.vscrollerbar, .hscrollerbar {padding: 20px 0 40px; z-index: 2; }
.vscrollerbarbeg { background:url('../img/polz.png') no-repeat 0 0; height:23px !important; width: 24px;}
.vscrollerbase, .hscrollerbase {background:url('../img/s-bg.png') repeat-y 9px 0; margin: 8px 0 0;}
.hscrollerbasebeg { height: 24px; background: url('../img/scrollbases.png') -22px 0px no-repeat;}
.hscrollerbaseend { height: 24px; width: 7px; background: url('../img/scrollbases.png') 0% 0% no-repeat; }
.vscrollerbasebeg { width: 24px; background: url('../img/s-bgt.png') no-repeat 0px 0px; height: 30px; margin-top: -8px;}
.vscrollerbaseend { height: 27px; width: 24px; background: url('../img/s-bgb.png') no-repeat 0px 0px; margin-top: -3px;}
.scrollerjogbox { width: 15px; height: 15px; top: auto; left: auto; bottom: 0px; right: 0px; background: white url('../img/scrolljog.png') 50% 50%; }
#mycustomscroll_vscrollerbar { height:24px !important}


Шаг 6: Скачиваем картинки, которыми и будет управляться ползунок (в данном примере будет лишь 1 вид стилей, но и этого достаточно, чтобы понять принцип работы. Не забудьте поменять путь к картинкам, если опять таки, он у вас изменится)

Если вы всё сделали правильно, у вас должно получиться нечто похожее, как на демо.
Копирование без указания кликабельной ссылка на источник (L2edit.Ru) - запрещено.



Ссылки на скачивания дотупны только зарегистрированным пользователям.
[ Регистрация | Вход ]
zKIBAz
zKIBAz | Пятница 11.05.2012 19:19 [Материал]
insider*

zKIBAz
zKIBAz | Пятница 11.05.2012 19:19 [Материал]
insuder помоги как ты сделал

Insider
Insider | Пятница 04.11.2011 18:04 [Материал]
Отличный материал,Овощ спасибо.


HTML

BB-Code

Ссылка

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Minecraft


Lineage 2


Кто тут онлайн


Онлайн всего: 1
Гостей: 1
Пользователей: 0