Michiel Kenis попросил руководство, объясняющее, как создать подобный эффект, используемый для демонстрации продуктов на веб-сайте Apple .
Этот «слайдер продукта» похож на прямую галерею, за исключением того, что есть слайдер для навигации по элементам, то есть бит, который пользователь контролирует для просмотра элементов. Простые вещи.
В jQuery уже есть плагины для создания этих эффектов, поэтому нам не нужно создавать их самим с нуля.
Как решить проблему
Чтобы создать галерею, управляемую слайдером, нам нужно следующее:
- Разметка, которая позволяет нам размещать несколько элементов в списке, и это выходит за пределы поля зрения.
- Виджет-слайдер для управления тем, какой подраздел продуктов мы видим.
- Логика для перемещения положения ползунков для обратного скольжения продуктов (т.е. мы скользим слева направо, продукты идут справа налево).
Я предоставил скринкаст, чтобы узнать, как создать эту функцию. Подробности о том, как и что я использовал, можно найти ниже.
Смотрите скринкаст галереи слайдеров ( альтернативная версия flash )
Посмотреть демо и исходный код, используемый в скринкасте
JQuery UI
Пользовательский интерфейс jQuery — это «набор настраиваемых виджетов и взаимодействий». Для этой задачи нам не понадобится большая часть jQuery UI, но для виджета-слайдера UI нам понадобится следующее:
- jquery.dimensions.js
- ui.mouse.js
- ui.slider.js
Конечно, нам все еще нужен последний jquery.js .
Все вышеперечисленные скрипты можно извлечь из загрузки пользовательского интерфейса jQuery .
HTML-разметка
Разметка для примера прямая. Это сводится к ulудерживанию нужных вам элементов в галерее, а divс другим вложенным div, для ползунка и его ручки.
<div class="sliderGallery">
<ul class="items">
<li>Item one</li>
<li>Item two</li>
<li>Item three, etc...</li>
</ul>
<div class="slider">
<!-- the handler to action the slide -->
<div class="handle"></div>
<!-- labels appear against the slider, as pointers to the user -->
<span class="slider-lb1">slider label 1</span>
<span class="slider-lb2">slider label 2</span>
<span class="slider-lb3">slider label 3</span>
</div>
</div>
CSS
Одна ключевая особенность используемого CSS: в моем примере я предполагал, что у меня не будет предопределенной ширины ulэлемента. Таким образом, я не могу плавать liэлементы и установить ширину. Чтобы убедиться, что все течет горизонтально, я использую white-space: nowrap.
Я только включил необходимый CSS для создания эффекта скользящей галереи. Если вы хотите увидеть полный CSS, используемый в скринкасте, просто просмотрите исходный код для демонстрации
Слайдер Галерея Контейнер
Переполнение гарантирует, что элементы скрыты, и position: relativeиспользуется для абсолютного позиционирования ulэлемента внутри него.
.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 960px;
}
Слайдер Галерея элементов
Это white-space: nowrapто, что позволяет нам работать с неизвестной шириной в ulэлементе.
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
Ручка ползунка
В скринкасте пример использует фоновое изображение для маркера ползунка, и, в частности, из примера ширина маркера больше, чем изображение, чтобы позволить ему наложить на стрелки влево и вправо.
.handle {
position: absolute;
cursor: move;
top: 0;
z-index: 100;
/* bespoke to your own solution */
height: 17px;
width: 181px;
}
JQuery
Как указано выше, нам нужно будет включить ряд плагинов из пользовательского интерфейса jQuery, затем мы добавим наш штрих jQuery для создания эффекта скользящей галереи.
Обязательные плагины
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>
Код слайдера
// not using $(function () {}) - see note below
window.onload = function () {
$(’div.sliderGallery’).each(function () {
var ul = $(’ul’, this);
var productWidth = ul.innerWidth() - $(this).outerWidth();
var slider = $(’.slider’, this).slider({
handle: ‘.handle’,
minValue: 0,
maxValue: productWidth,
slide: function (ev, ui) {
ul.css(’left’, ‘-’ + ui.value + ‘px’);
},
stop: function (ev, ui) {
ul.animate({ ‘left’ : ‘-’ + ui.value + ‘px’ }, 500, ‘linear’);
}
});
});
};
Пожалуйста, обратите внимание во время показа экрана, который я использовал, $(function () {})но с тех пор мне пришлось изменить это на window.onload. Это потому , что я использую , white-space: nowrapа ширина не не рассчитывается , пока после того, как загружаются изображения. Функция готовности jQuery запускается перед загрузкой изображений, чтобы обеспечить доступ JavaScript к DOM как можно раньше.
Это не было проблемой в демонстрации, потому что изображения были загружены с локального сервера и, следовательно, загружены достаточно быстро, чтобы позволить коду правильно рассчитать ширину.
Код разбивается следующим образом:
window.onload = function () {
Когда DOM и изображения готовы (обратите внимание, что если вы не используете, white-space: nowrapто вы должны использовать стандартный $(document).ready()метод).
$('div.sliderGallery').each(function () {
Переберите все div.sliderGalleryэлементы. Этот дизайн кода настраивает нас на преобразование нашего кода в повторно используемый плагин.
var ul = $('ul', this);
Ищите ulв контексте этого — который в настоящее время div.sliderGallery.
var productWidth = ul.innerWidth() - $(this).outerWidth();
.innerWidth()и .outerWidth()приходят из jquery.dimensions.js. Мы вычитаем текущую div.sliderGalleryширину, потому что когда мы скользим, мы хотим, чтобы она остановилась, как только последний элемент стал видимым , а не сдвигалась полностью до тех пор, пока он не исчез из поля зрения.
var slider = $('.slider', this).slider({
.slider() происходит от ui.slider.js.
handle: '.handle',
Класс нашего слайдера.
slide: function (ev, ui) {
ul.css('left', '-' + ui.value + 'px');
},
Когда ручка перемещается, мы перемещаем ul элементов, обратите внимание, что она перемещается отрицательно, создавая эффект прокрутки.
stop: function (ev, ui) {
ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
}
Мы используем это, когда щелкают область слайдера, чтобы создать эффект прокрутки.
Продолжая
Когда у меня есть рабочая версия кода, я часто пытаюсь думать, как взаимодействие может быть лучше. Вот список способов, которыми это может быть улучшено, без определенного порядка — если вы представляете себе проблему:
- Улучшенный эффект прокрутки, в частности, быстрая прокрутка для основной части анимации, и замедление, когда она останавливается на конечном элементе.
- Превратите это в плагин.
- Стрелку можно повернуть к обработчикам, чтобы сдвинуть ручку только на часть расстояния, а не на все.
- Хороший эффект, который имеет версия Apple, заключается в том, что метки перехода внутри элемента слайдера изменяют класс с учетом расстояния, на котором они находятся от маркера слайдера. Они кажутся ярче, когда они ближе и тупее, так как они находятся дальше от ручки.
- Все, что вы можете придумать!