Слайдер с описанием на jquery. Подборка адаптивных слайдеров
Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Пример 1. Изменение цвета ссылок
Цвет ссылок a { color: #008; /* Цвет текста */ background: #ffc; /* Цвет фона */ padding: 2px; /* Поля вокруг текста */ transition: 1s linear; /* Время изменения */ } a:hover { color: #fff; /* Цвет текста */ background: #008; /* Цвет фона */ }
Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.
В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.
Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью CSS и JQuery . С помощью данного плагина можно добиться удивительно красивых результатов оформления. Например, можно сделать клёвое меню, которое будет плавно менять цвет при наведении, и поверьте, смотрится это очень красиво.
JQueryДля начала между тегами и нужно поставить следующее:
Затем опять же между тегами и копируем вот этот скрипт:
$(document).ready(function(){ $(".Box").hover(function() { $(this).stop().animate({ backgroundColor: "#FF4500"}, 400); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 400); }); });
Где .Box — это класс блока, который мы придумали выше в CSS.
«#FF4500 » — цвет при наведении. 400 — скорость анимации при наведении.
«#ffffff» — исходный цвет после убирания курсора. 400 — скорость анимации при убирании курсора.
HTMLПосле того когда Вы всё сделаете как написано выше, цвет блока плавно будет меняться . Чтобы такой блок вставить на страницу, нужно просто добавить следующее в нужное место:
И блок появится.
ВажноДанный плагин может менять только цвет фона (бекграунд). Например к ссылкам или к тексту его прикрепить не получится. Цвет ссылок меняет другой плагин (скоро обязательно напишу как сделать).
Если Вам захочется сделать чтобы блоки на странице были разного цвета, как у меня в , Вам нужно будет между тегами и поставить несколько скриптов подряд и соответственно не забыть поменять цвет на желаемый. Самое главное нужно поменять класс, например в нашем примере выше — класс Box , а следующий скрипт должен быть с другим классом, например Box1 , затем Box2 и так далее.
Вот и всё, дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч.
В этом уроке речь пойдет об эффекте, при котором происходит плавная смена фона объекта в результате наведения курсора мыши на него.
В начале, как уже наверно успели привыкнуть (если вы не первый раз используете jQuery
библиотеку), подключаем jQuery
в
нашего сайта.
По мимо самого jQuery
, нам понадобиться еще и jQuery UI
.
Если вы знакомы с принципами jQuery , то должны помнить, что в хедер мы должны поместить код вызова, в данном случае, анимации смены цвета, чтобы он подгрузился до того, как загрузится основное содержимое страницы. $(document).ready(function() { // поместить ваш код вызова анимации сюда });
HTMLВот пример разметки html .
Изменение цвета фона элемента Анимация изменения цвета при наведении курсора / PC игры / Portal 2 Portal 2
Оригинальная Portal - вещь уже культовая и неожиданная для своего времени. Она только еще раз подтверждает проверенный веками тезис о торжестве идеи над передовыми технологиями.
CSSCSS стили оформления нашей странички выглядят так.
Png); text-align:left; color:#333; width:800px; font-size:14px; font-family:georgia, "time new romans", serif; margin:0 auto; padding:0; } a{ color:#333; text-decoration:none } a:focus { outline: none; } h1 { font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; } h2 { font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; } h3, h3 a{ font-size:14px; font-family:verdana, helvetica, arial, sans-serif; letter-spacing:-1px; color:#333; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; } p { color:#333; float:left; line-height:22px; margin:5px; padding:0 0 10px; } #container { margin: 0; padding: 0; } .boxes { background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; } img { border:5px solid #CCCCCC; } div.info { border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width:100%; } .block { color:#0066CC; float:left; overflow:hidden; position:relative; width:600px; } .block h4, .block h4 a{ color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; }
JSDIV
элемент имеющий класс .boxes
- является элементом, блоком, у которого мы хотим поменять цвет.
Вот этот код мы и будет вызвать в хедере.
$(document).ready(function(){ $(".boxes").hover(function() { $(this).stop().animate({ backgroundColor: "#40B8FE"}, 800); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 800); }); }); В параметрах backgroundColor задается цвет, а значение 800 - это скорость анимации.
Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!
Какие виды слайдеров бывают и где они могут понадобится?Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.
Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.
В основном заказчики просят внедрять на веб-страницы галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. Каруселью такой механизм прозвали из-за того, что показ картинок повторяется по кругу.
На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.
Самостоятельная деятельностьНу а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый JavaScript . Это будет автоматический переключатель картинок по кругу.
Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/*Описываю внешний вид каркаса, основы для будущего слайдера */
#slides{
position: relative;
height: 415px;
width: 100%;
padding: 0px;
list-style-type: none;
box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010;
}
/* Редактирую отображение картинок*/
img {
width: auto;
height: 390px;
padding: 13px;
}
/*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */
li {
text-align: center;
}
/*Описываю внешний вид самих слайдов */
.slide{
position: absolute;
opacity: 0;
top: 0px;
left: 0px;
height: 100%;
z-index: 3;
width: 100%;
background: blue;
-moz-transition: opacity 1.5s;
transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
}
/*При отображении объект становится видимым и выдвигается на передний план*/
.showing{
opacity: 1;
z-index: 4;
}
|
Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }
Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.
Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись
document.querySelectorAll ("#slides .slide")
Таким образом, в MySlider хранится коллекция из четырех элементов.
Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .
Переходим к самой функции.
Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.
Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально.
Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е. работает без jQuery.
Протестирован в следующих браузерах:
- Chrome 26.0
- Firefox 20.0
- Safari 5.1.7
- IE 10
- Opera 16.0
Есть неполная поддержа IE8/9 (нет эффектов).
Особенности- Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
- Изменяет размеры с зависимости от содержимого, но можно и запретить.
- Навигация с помощью клавиатуры - когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
- Поддержка мобильных touch событий.
Перед закрывающимся тегом необходимо подключить slidr.js или slidr.min.js файл.
HTML разметка
slidr.js может работать с любыми inline , inline-block , block элементами, имеющими аттрибут id . Допускается использовать любые дочерние элементы первого уровня с атрибутом data-slidr , например:
- apple
- banana
- coconut
После подключения slidr.js станет доступен глобальный объект slidr . Самый простой способ создания slidr:
Slidr.create("slidr-id").start();
Вызов с заданием всех настроек:
Slidr.create("slidr-id", { after: function(e) { console.log("in: " + e.in.slidr); }, before: function(e) { console.log("out: " + e.out.slidr); }, breadcrumbs: true, controls: "corner", direction: "vertical", fade: false, keyboard: true, overflow: true, theme: "#222", timing: { "cube": "0.5s ease-in" }, touch: true, transition: "cube" }).start();
НастройкиВсе доступные настройки для slidr.js приведены в таблице ниже.
after | function | callback-функция после смены слайда | |
before | function | callback-функция до смены слайда | |
breadcrumbs | bool | false | Показать хлебные крошки для управления слайдами. true или false . |
controls | string | border | Расположение стрелок для управления слайдами. border , corner or none . |
direction | string | horizontal | Направление по умолчанию для новых слайдов. horizontal или h , vertical или v . |
fade | bool | true | Включить эффект затемнения для смены слайдов (fade-in/out). true или false . |
keyboard | bool | false | Включить смену сладов с помощью клавиатуры. true или false . |
overflow | bool | false | Включить overflow для блока со слайдером. true или false . |
pause | bool | false | Не менять слайды автоматически при наведении мыши (необходимо запустить auto()). true или false . |
theme | string | #fff | Цвет элементов управления слайдером (хлебных крошек и стрелок). #hexcode или rgba(value) . |
timing | object | {} | Custom animation timings to apply. {"transition": "timing"} . |
touch | bool | false | Задействовать touch управление на мобильных устройствах. true или false . |
transition | string | linear | Эффект смены слайдов. cube , linear , fade или none . |
Функции обратного вызова after и before получают следующие данные:
{ id: "slidr-id", in: { el: #, slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in" }, out: { el: #, slidr: "data-slidr-out", trans: "transition-out", dir: "direction-out" } }
Slider.js global APIГлобальное пространство имен slidr предоставляет следующие функции:
/** * Текущая версия * @return {string} major.minor.patch. */ function version() {}; /** * Доступные эффекты перехода. * @return {Array} of transitions. */ function transitions() {}; /** * Создаёт и возвращает Slidr. * Вызов этой функции дважды на одном и том же элементе возвратит уже созданный объект Slidr. * @param {string} id элемента для Slidr. * @param {Object=} opt_settings Настройки для слайдера. */ function create(id, opt_settings) {};
Slider API // Инициализация Slidr со своими настройками var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }); // Добавить горизонтальные слайды со стандартным эффектом перехода. // дублирующий элемент массива "one" в конце позводяет Slidr // прокручивать слайды бесконечно s.add("h", ["one", "two", "three", "one"]); // Добавляет вертикальный слайд с эффектом перехода "куб". s.add("v", ["five", "four", "three", "five"], "cube"); // Запуск слайдера. s.start();Короткая запись
Var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }).add("h", ["one", "two", "three", "one"]) .add("v", ["five", "four", "three", "five"], "cube") .start();
Полный список функци API Slidr.js представлен ниже
/** * Start the Slidr! * Automatically finds slides to create if nothing was added prior to calling start(). * @param {string} opt_start `data-slidr` id to start on. * @return {this} */ function start(opt_start) {}; /** * Check whether we can slide. * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {boolean} */ function canSlide(next) {}; /** * Slide! * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {this} */ function slide(next) {}; /** * Adds a set of slides. * @param {string} direction `horizontal || h` or `vertical || v`. * @param {Array} ids A list of `data-slidr` id"s to add to Slidr. Slides must be direct children of the Slidr. * @param {string=} opt_transition The transition to apply between the slides, or uses the default. * @param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur. * @return {this} */ function add(direction, ids, opt_transition, opt_overwrite) {}; /** * Automatically advance to the next slide after a certain timeout. Calls start() if not already called. * @param {int=} opt_msec The number of millis between each slide transition. Defaults to 5000 (5 seconds). * @param {string=} opt_direction "up", "down", "left", or "right". Defaults to "right". * @param {string=} opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr). * @return {this} */ function auto(opt_msec, opt_direction, opt_start) {}; /** * Stop auto transition if it"s turned on. * @return {this} */ function stop() {}; /** * Set custom animation timings. * @param {string|Object} transition Either a transition name (i.e. "cube"), or a {"transition": "timing"} object. * @param {string=} opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object. * @return {this} */ function timing(transition, opt_timing) {}; /** * Toggle breadcrumbs. * @return {this} */ function breadcrumbs() {}; /** * Toggle controls. * @param {string=} opt_scheme Toggle on/off if not present, else change layout. "border", `corner` or `none`. * @return {this} */ function controls(opt_scheme) {};
Скрол страницы во время смены слайдовВ некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к body:
Body { overflow: hidden; }
Динамическое изменение размераSlidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.
Автоматическое изменение размеров
good gorgeous unbelievable
Статические размеры
good gorgeous unbelievable
Элементы управления SlidrРазметка элементов управления следующая:
Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:
Aside .slidr-control.right { width: 50px !important; height: 50px !important; top: 50% !important; margin-top: -25px !important; right: -25px !important; border-radius: 25px; background: url("/static/images/arrow_right.png") 14px 13px no-repeat black; opacity: 0.4; } aside .slidr-control.right:hover { opacity: 1; }
Элемент управления "стрелка" реализован с помощью псевдоселектора:after , поэтому, чтобы его скрыть, используйте следующий код:
// Hide a single arrow within a single controller. aside .slidr-control.right:after { border-color: transparent !important; } // Hide all arrows within a single controller. aside .slidr-control:after { border-color: transparent !important; } // Hide all Slidr arrows. aside .slidr-control:after { border-color: transparent !important; }
Хлебные крошки SlidrХлебные крошки имеют простую HTML разметку. Каждый ul обозначает всю строку, а каждый li отдельную хлебную крошку:
...
Стилизация хлебных крошек с помощью CSS:
// Customize the position, size, border color and background color. aside { right: 50% !important; margin-right: -41px !important; } aside .slidr-breadcrumbs li { width: 15px !important; height: 15px !important; margin: 3px !important; } aside .slidr-breadcrumbs li.normal { border-color: white !important; } aside .slidr-breadcrumbs li.active { background-color: black !important; }
ЛицензияЭто программное обеспечение может свободно использовать под лицензией MIT.