Создание jQuery Image Scroller

В этом уроке мы собираемся создать скроллер изображений, используя отличные анимационные функции jQuery и, в общем, повеселиться с кодом. Изображение скроллеры, конечно, ничего нового; их версии выходят все время. Многие из них, однако, инициированы пользователем; Это означает, что для изменения отображаемого в данный момент содержимого посетитель должен нажать кнопку или выполнить другое действие. Этот скроллер будет отличаться тем, что он будет полностью автономным и начнет прокручиваться после загрузки страницы.

Готовый виджет будет полностью кросс-браузерным и будет работать так, как ожидается в последних версиях всех наиболее распространенных браузеров. Мы также добавим некоторое взаимодействие, добавив элементы управления, которые позволяют посетителю изменять направление анимации. В этом учебном пособии мы будем работать только с jQuery и небольшим количеством HTML и CSS, и мы сможем запустить примеры без полной настройки веб-сервера.

Начиная

Давайте сначала создадим базовую HTML-страницу; на новой странице в вашем текстовом редакторе добавьте следующий код:

Сохраните это как imageScroller.html в новой папке. Мы ссылаемся на пользовательскую таблицу стилей в заголовке страницы, которую мы будем кодировать через некоторое время, и добавляем ссылку на размещенную версию последней версии jQuery внизу страницы. Загрузка сценариев в конце текста — это признанный метод повышения производительности вашей страницы, поэтому его следует практиковать везде, где это возможно.

Наш виджет состоит из ряда вложенных контейнеров и набора изображений, завернутых в ссылки. Изображения, размещенные в контейнерах, жестко запрограммированы на странице в целях доступности. Мы не будем извлекать изображения динамически; любые изображения, помещенные в виджет, будут автоматически прокручиваться (при условии, что они обернуты в ссылку с соответствующим именем класса).

Самый внешний контейнер будет использоваться в основном для позиционирования и отображения, в то время как следующий контейнер используется для украшения виджета фоновым изображением. Внешний контейнер также необходим для добавления элементов управления, чтобы они правильно отображались над содержимым в IE.

Самый внутренний контейнер — это элемент, который будет использоваться для просмотра изображений. Этот элемент имеет класс js-disabled, который будет использоваться исключительно для посетителей, у которых отключен JavaScript. Мы будем использовать этот класс, чтобы уменьшить каждое из изображений с помощью CSS, чтобы все они были доступны для просмотра.

Все изображения имеют одинаковый размер, и контейнеры будут иметь размер, чтобы разместить их достаточно аккуратно. Размер изображения также используется в сценарии, который мы добавим; Я специально выделю, где эти ссылки встречаются, но вы должны знать, что если вы хотите использовать изображения другого размера, сценарий и размер контейнеров необходимо будет соответствующим образом скорректировать.

Стилизация виджета

После ссылки на jQuery у нас есть собственный элемент сценария с ярлыком jQuery document.ready , ожидающий, пока мы добавим код, который оживит виджет. Однако прежде чем сделать это, давайте просто быстро добавим CSS. В другом новом файле в вашем текстовом редакторе добавьте следующие селекторы и правила стиля:

Если JavaScript отключен и во время загрузки страницы все изображения будут доступны для просмотра

Сохраните это как imageScroller.css в той же папке, что и веб-страница. Сначала у нас есть селектор класса, который нацелен на наш класс js-disabled ; с помощью этих правил мы просто устанавливаем размеры изображений так, чтобы они были достаточно маленькими, чтобы складываться рядом друг с другом по ширине виджета. Если JavaScript отключен, и пока страница загружается, все изображения будут доступны для просмотра — очень быстрый и простой запасной вариант, но не обязательно надежный и, конечно, не полный Прогрессивное улучшение. Значения, указанные для ширины и высоты, должны будут варьироваться в зависимости от количества изображений в средстве просмотра.

После этого у нас есть селекторы и правила, которые оформляют стиль виджета и заставляют его функционировать правильно. Большая часть кода здесь предназначена исключительно для целей отображения, фоновых изображений, цветов и т. Д. Важное правило, от которого зависит правильная работа реализации, — это настройка переполнения: скрыта во внутреннем контейнере средства просмотра. Это скроет изображения, которые еще не были показаны, и изображения, которые уже прошли через зрителя. На этом этапе, когда мы запускаем страницу, мы должны увидеть что-то вроде этого:

Некоторые из CSS мы установим в JavaScript через мгновение, а некоторые элементы, на которые мы нацеливаемся в CSS, еще не существуют, но это все, что нужно, чтобы войти в файл CSS.

Воплощение виджета в жизнь

На заключительном этапе этого урока мы добавим jQuery-аромат JavaScript, который заставит виджет работать и создать желаемое поведение. В пустую анонимную функцию внизу HTML-страницы добавьте следующий код:

Прежде всего мы удаляем класс js-disabled из контейнера средства просмотра. Затем мы создаем новый контейнер для хранения всех изображений, которые находятся внутри виджета. Основная причина этого заключается в том, что вместо анимации каждого изображения по отдельности, что приводит к одновременному запуску потенциально большого количества анимаций, нам нужно анимировать только один элемент — контейнер, который мы создаем сейчас.

Ширина нового контейнера устанавливается на количество изображений, умноженное на ширину каждого изображения, которое в этом примере составляет 170 пикселей. Это один из фрагментов кода, о котором я говорил ранее, о котором я бы специально упомянул, и его необходимо будет изменить, если мы решим использовать изображения другого размера. Высота контейнера также специально установлена ​​для высоты каждого изображения.

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

Скорость легко определить, и, конечно, расстояние, на которое она делится, зависит от продолжительности путешествия. Для справки, в этом примере точная скорость анимации будет равна 0,274 пикселей на миллисекунду. Последняя переменная, direction, представляет собой простую строку, обозначающую, что анимация будет продолжаться справа налево, хотя мы могли бы легко изменить ее на ltr, если бы захотели.

Наконец, мы устанавливаем начальную позицию нового контейнера; так как анимация в настоящее время установлена ​​на rtl, нам нужно расположить новый контейнер изображений так, чтобы его левый край был установлен на правый край зрителя. Если мы установим анимацию на ltr, правый край элемента будет выровнен с левым краем контейнера. Мы определяем направление с помощью троичного условного JavaScript. Помимо его позиции, мы также даем новому контейнеру имя класса, соответствующее его направлению, которое мы можем проверить в разных точках скрипта.

Далее нам нужно определить новую функцию для запуска и сохранения анимации. При обычном выполнении сценария бывает несколько разных моментов, когда нам нужно начать анимацию, поэтому обертывание этой функциональности в функцию, которую мы можем вызвать, когда нам нужно, помогает уменьшить объем кода. Добавьте следующий код:

Функция аниматора принимает три аргумента; элемент для анимации, продолжительность времени, в течение которого должна выполняться анимация, и направление, в котором элемент должен быть анимирован. Функция разбита на два отдельных блока, один для анимации rtl, а другой для ltr.

В каждом блоке условия мы обновляем имя класса контейнера изображения, чтобы отразить текущее направление на случай, если направление изменилось (это одно из взаимодействий, инициированных посетителем).

Затем мы определяем анимацию, перемещая контейнер изображения плюс для ltr или минус для rtl ширины контейнера изображения, создавая впечатление скольжения по зрителю. К сожалению, мы не можем использовать встроенную медленную, нормальную или быструю анимацию, потому что даже медленная настройка ограничивает общее время выполнения анимации всего 600 миллисекундами, что слишком быстро даже для небольшого количества изображений, которые мы используем в этом примере.

Мы задаем строку linear в качестве третьего аргумента метода animate, который представляет собой функцию замедления, и устанавливаем анимацию для продолжения с одинаковой скоростью от начала до конца; если мы не установим это, анимация заметно ускорится и замедлится в начале и конце анимации соответственно.

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

Чтобы запустить анимацию при загрузке страницы, нам нужно вызвать функцию, которую мы только что определили; добавьте следующий вызов функции:

Все, что мы делаем, это вызываем функцию, передающую элемент в animate, и переменные, которые мы устанавливаем в первом разделе кода. Если мы запустим страницу сейчас, мы должны обнаружить, что анимация запускается сразу после загрузки страницы и продолжается бесконечно, как показано (вроде) на следующем снимке экрана:

Добавление некоторого взаимодействия

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

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

Мы используем живой метод jQuery (впервые в версии 1.3!), Чтобы прикрепить обработчик к элементам и указать анонимную функцию, которая будет выполняться при возникновении события.

В этой функции мы сначала останавливаем анимацию, используя метод остановки jQuery, передавая истинное логическое значение в качестве аргумента. Этот аргумент отменяет очередь анимации, если она существует; это не должно делать, так как в любой момент времени должна быть только одна анимация, но полезно использовать этот аргумент на всякий случай.

Мы проверяем, существует ли панель управления, и, если она не создается, мы создаем новый элемент div, присваиваем ему идентификатор, чтобы он выбирал наши правила стиля и добавлял его во внешний контейнер. Затем мы используем метод css jQuery, чтобы установить непрозрачность в кросс-браузерном режиме, чтобы избежать необходимости нацеливания на разные браузеры с помощью нашего CSS, и сдвинуть элементы управления на место.

Мы также создаем некоторые ссылки и добавляем их в панель управления; Эти ссылки будут действовать как кнопки, которые позволяют посетителю изменять направление движения изображений. Мы добавим обработчики для этих кнопок через мгновение. Наконец, мы получаем содержимое атрибута title ссылки-обертки, которая запустила событие mouseover, и создаем новый элемент абзаца с внутренним текстом, установленным в заголовок. В этом разделе кода мы в большой степени полагаемся на троичное условное сокращение JavaScript, поскольку оно обеспечивает превосходный механизм для создания и добавления элементов, только если они еще не существуют.

Возможно, вы также заметили, что мы установили переменную для хранения содержимого атрибута title текущего триггера. Возможно, вам интересно, почему мы не используем вместо этого следующий код:

Причина этого в том, что нет никакой двусмысленности относительно того, что относится к $ (this). Использование приведенного выше кода работает, но выдает ошибки, которые хотя и не являются фатальными, но все же не настолько обнадеживают для потенциальных пользователей виджета. Использование переменной просто гарантирует, что этих ошибок избежать. Панель управления, когда она видна, выглядит как на следующем снимке экрана:

После наведения мыши анимация будет остановлена; мы можем легко запустить его снова, используя обработчик события mouseout, который мы должны добавить далее:

Мы снова используем живой метод jQuery, но на этот раз мы также передаем необработанный объект события в нашу анонимную функцию обратного вызова. Мы сразу используем этот объект, чтобы увидеть, переместился ли указатель на панель управления. Если это не так, мы скрываем элементы управления, но если это так, мы ничего не делаем и продолжаем перезапускать анимацию. Обратите внимание, как мы используем вложенную троичную структуру, которая эквивалентна условному условию if else.

Основная цель анонимной функции — перезапустить анимацию, но прежде чем мы сможем это сделать, нам нужно определить продолжительность анимации; мы не можем жестко закодировать значение, потому что контейнер изображения будет перемещен. Начальная продолжительность была установлена ​​на 1 секунду для каждого изображения, в этом примере 5 секунд. Если в средстве просмотра осталось только одно изображение, и мы снова установили анимацию на 5 секунд, анимация будет продолжаться заметно медленнее.

Сначала мы выясним, каково общее расстояние, на которое контейнер изображения перемещается в полной анимации. Затем мы выясняем, сколько всего пути еще предстоит пройти. Нам нужно будет сделать другой расчет в зависимости от того, происходит ли анимация слева направо или наоборот, поэтому мы снова используем троичное условное выражение.

Если анимация происходит слева направо, расстояние, которое нужно пройти, является атрибутом левого стиля контейнера изображения (полученного с помощью метода css jQuery), добавляемого к ширине контейнера изображения, вычитаемого из общего расстояния. Однако, если контейнер изображений перемещается справа налево, расстояние, которое нужно пройти, равно ширине контейнера изображений минус левый атрибут стиля, вычтенный из общего расстояния. Методы width и css jQuery возвращают строковые значения, поэтому мы используем JavaScript-функцию parseInt для преобразования их в числовые значения.

Затем вычисляется новая продолжительность анимации путем деления расстояния, оставшегося до движения, на скорость, которую мы отработали в самом начале кода. Получив этот рисунок, мы можем снова вызвать функцию аниматора, передавая необходимые параметры, заставляя анимацию запускаться снова с того места, где она остановилась, в том же направлении движения.

Изменение направления

В заключительной части нашего скрипта мы можем добавить обработчики для ссылок в панели управления, используемых для изменения направления анимации. Сразу после кода, который мы только что добавили, введите следующий код:

Эта функция, запускаемая при нажатии кнопки слева направо, является относительно простой и содержит код, очень похожий на тот, который мы уже использовали; сначала мы остановим текущую анимацию (она возобновится, когда посетитель наведет указатель на панель управления), а затем поменяем имя класса так, чтобы оно соответствовало новому направлению движения. Затем мы определяем новую продолжительность анимации так же, как мы делали это раньше, прежде чем, наконец, снова вызвать нашу функцию аниматора. Это просто обработчик для кнопки ltr; обработчик для кнопки rtl практически идентичен, но использует правильный расчет для противоположного направления движения:

Теперь это весь код, который нам нужно написать. Если вы запустите страницу в браузере на этом этапе, вы увидите, что виджет работает так, как задумано.

Резюме

В этом руководстве мы создали забавный интерактивный виджет для отображения серии изображений, который можно использовать для отображения логотипов производителей продуктов, которые вы продаете, или логотипов программного обеспечения, которые вы рекомендуете, или всего, что вам нравится. Мы сосредоточились в основном на аспектах анимации и взаимодействия виджета, но также рассматривали такие вещи, как обеспечение базового варианта в случае, если JavaScript отключен в браузере.