Цель: изучить события в jQuery, изучить применение анимации в jQuery, создать галерею изображений.

Задачи:

• научиться использовать события;
• научиться делать анимацию;
• сделать галерею изображений.

В результате выполнения лабораторной работы получится следующая веб-страница (рисунок 6.1):

Подготовка к работе

Делаем копию папки project5, созданной в предыдущем уроке. Назовем ее project6 (рисунок 6.2):

1. Создайте файл gallery.html в папке project6 и файл gallery_style.scss в папке scss.

2. Задайте базовую структуру в файле gallery.html. Также подключите файл gallery.css (рисунок 6.3):

3. Скачайте библиотеку slick, разархивируйте ее в папку project6.

4. В файле gallery.html подключите библиотеку slick. Сначала стиль этой библиотеки в теге head (рисунок 6.4), затем файл скрипта перед закрывающим тегом body (рисунок 6.5):

5. Добавьте файлы jQuery, как мы это сделали в предыдущем уроке. Важно, чтобы файл jQuery подключался первее файла slick.js

6. Создайте файл gallery.js в папке js и подключите его к gallery.html (рисунок 6.6):

7. Скопируйте изображения из папки img_for_lab6 в папку нашего проекта внутрь папки img (project6/img).

К этому документу мы вернемся позже в ходе лабораторной работы.

События

К событиям относятся клики мышью, наведение на какой-либо элемент, взаимодействие с клавиатурой и т.д.

Клик мышью (click, dblclick)

Можно отслеживать по любому элементу.

1. В файле main.js обратитесь к элементу h1 и используйте метод click сделайте изменение цвета при нажатии (рисунок 6.7):

2. Проверьте результат в браузере (рисунок 6.8):

3. Сделайте изменение размера шрифта в первом абзаце при двойном клике мышью.

Полеты над элементом (mouseenter, mouseleave и т.д.)

Можно отловить событие, которое происходит, при наведении курсора на элемент. Похоже на :hover в css, однако имеет куда больший функционал.

4. Создайте эффект добавления и удаления подчеркивания при наведении на первый абзац (рисунок 6.9):

5. Проверьте результат в браузере (рисунок 6.10):

6. Сделайте изменение ширины блока заголовков при наведении.

Клавиатура (keypress, keydown, keyup)

Позволяет отслеживать нажатие клавиш.

7. Задайте изменение размера шрифта у второго заголовка при нажатии кнопки f (рисунок 6.11):

8. Проверьте результат в браузере (рисунок 6.12):

9. Задайте на клавишу Esc возврат к изначальному шрифту (все коды клавиш можно посмотреть здесь).

Анимация (hide, fade, animate)

jQuery позволяет плавно менять свойства элементов.

10. Задайте плавное изменение ширины блока заголовков через метод animate (рисунок 6.13):

11. Проверьте результат в браузере (рисунок 6.14):

12. Задайте плавное изменение этого блока размера при наведении курсора.

Взаимодействие с классами (addClass, removeClass, toggleClass)

Через jQuery можно присваивать классы существующим блокам.

13. Добавьте свойством стиля main__item слово !important (рисунок 6.15):

14. Добавьте абзацу с классом text-2 класс main__item при клике (рисунок 6.16):

15. Проверьте результат в браузере (рисунок 6.17):

Мы добавили !important, т.к. стиль, который применяется через javascript добавляется непосредственно в код html, а соответственно имеет больший приоритет, чем стиль из файла .css.

16. Уберите у блока с классом text-3 класс text-3 при наведении.

Галерея

Для создания галереи будет использоваться библиотека slick.

1. Перейдите в файл gallery.html и создайте блок с картинками из папки img (рисунок 6.18):

2. В файле gallery.js обратитесь к блоку slider с методом .slick (рисунок 6.19):

Результат можно заметить уже сейчас, но лучше немного стилизовать слайдер.

3. Сначала зададим стили для элементов страницы (рисунок 6.20):

4. Затем стили для самого слайдера (рисунок 6.21):

5. Проверьте результат в браузере (рисунок 6.22):

Контрольное задание

Создайте слайдер по вариантам, пользуясь библиотекой slick. Внешний вид слайдеров представлен на странице библиотеки slick. Наполните его изображениями по своей теме.

Функции slick

1. Single Item

2. Multiple Items

3. Responsive Display

4. Variable Width

5. Adaptive Height

6. Data Attribute Settings

7. Center Mode

8. Lazy Loading

9. Autoplay

10. Fade

11. Add & Remove

12. Filtering

13. Destroy

14. Slider Syncing

15. Right to Left

Контрольные вопросы

1. Что относится к событиям?
2. По каким элементам можно отслеживать клик мышью?
3. Можно ли изменять стиль элементов при помощи событий?
4. Чем отличается keydown от keyup?
5. Какой стиль имеет больший приоритет?
6. Что в этой конструкции означает цифра 1000?
   
   
7. Можно ли удалять класс у элемента?
8. Как сделать событие при нажатии на конкретную клавишу?
9. Сколько изображений может быть использовано в одном слайдере?
10. Где должна находиться библиотека jQuery при подключении других библиотек?