/cache/autoptimize/css/autoptimize_67f838f81e815ea66aed120aba46de2f.css «rel =» stylesheet «/> Ползунок цвета/Полоса прокрутки на странице в jQuery & # 8211; Создание страниц & # 8211; веб-мастер блога Перейти к содержанию Создание страниц — этот веб-сайт блога Меню Закрыть Главная Контакт Создание страниц Цветной слайдер/Полоса прокрутки на странице в jQuery Главная> веб-мастеру> Цветной слайдер/Полоса прокрутки на страницу в jQuery Сообщение опубликовано: 1 июля 2016 г. Категория сообщения: веб-мастер Комментарии: 3 комментария

Сегодня у меня, как и у большинства поляков, такое подавленное настроение. Конечно, матч Польша-Португалия был для нас красивым, радость поляков на второй минуте разносилась по всей усадьбе. Прекрасная игра на протяжении всего Евро, мы можем очень гордиться тем, что нам подарила команда, мы никогда не мечтали зайти так далеко. Так мало не хватало, но швейцарцы могут сказать то же самое, тогда им это почти удалось, это было очень близко к нам. Смело могу сказать, что наши футболисты играли лучше, отлично боролись и должны гордиться собой. И печаль не потому, что они проиграли, потому что это было не так, а потому, что мы пропустим их следующие матчи, но их будет много, они показали класс.

Блог для веб-мастеров, и я пишу о футболе, но что бы там ни было, я не собираюсь начинать блог вроде & # 8222; разговоров о тканях & # 8221; иногда писать что-то не по теме 🙂

Теперь к делу. Вы когда-нибудь создавали страницу с интересной графикой, с текстовым полем, но это поле нельзя было растянуть, и на ней было много текста или графики? У меня это было много раз. Например, недавно я сделал сайт агротуризма:

Хороший фон досок и галерею на них фото. А фотографий много, поэтому я подумал, что буду использовать молнию. Но чтобы этот слайдер выглядел грубовато и некрасиво, я нашел интересный скрипт jQuery & # 8211; mCustomScrollbar, который раскрашивает ползунок и создает поле для прокрутки содержимого страницы.

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

Страница состоит из: & # 8211; папка сценария (файлы: jquery.mCustomScrollbar.concat.min.js, scrollbar.js и jquery.mCustomScrollbar.css) & # 8211; index.html & # 8211; style.css

В index.html в заголовке мы помещаем код слайдера:

& lt; link href = «script/jquery.mCustomScrollbar.css» rel = & quot; таблица стилей & quot; type = & quot; text/css & quot;/& gt; & lt; script src = & quot; http: //ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" & gt; & lt;/script & gt; & lt; script src = «script/jquery.mCustomScrollbar.concat.min.js» & gt; & lt;/script & gt; & lt; script src = «script/scrollbar.js» & gt; & lt;/script & gt;

В теле, где вы хотите это поле с текстом и ползунком, поместите код:

& lt; div id = & quot; scrollbar & quot; class = «content» & gt; Здесь необходимо добавить содержимое окна ползунка, чтобы сделать ползунок видимым. & lt;/div & gt;

Код для css div со слайдером в style.css:

#scrollbar {float: left; высота: 430 пикселей; перелив: авто; }

Надо на diva #scrollbar вставить высоту: высоту, установить то, что нам нужно.

Содержимое файла scrollbar.js в директории скрипта:

(function ($ ) {$ (окно) .load (функция () {$ (& quot; .content & quot;). mCustomScrollbar ();});}) (jQuery);

И содержимое двух других файлов, таких как: jquery.mCustomScrollbar.concat.min.js и jquery.mCustomScrollbar.css

Я прилагаю для загрузки здесь: jquery.mCustomScrollbar.concat.min jquery. mCustomScrollbar

Цвета, размер ползунка можно изменить в файле стиля jquery.mCustomScrollbar.css. Есть некоторые из этих вариантов, ищите их, лучше всего использовать инструменты из моей предыдущей публикации & # 8211; Плагины Firefox для веб-мастеров.

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

С уважением iiiii Poland to bojuuuu !!!!! 🙂