Рассмотрим очень распространенный в современном вебе элемент, блоки, организованные «гармошкой» или «аккордеоном».
Первой строчкой мы добавляем класс “active” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за смену цвета блока).
Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp.
Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “active”
Мы рассмотрели несколько примеров применения популярного фреймворка jquery.
1. Создать кнопку, по клику на которой заданный элемент на странице будет вести себя следующим образом:
|
| Коричневый квадрат 50*50 пикс.
| 1.Исчезает
2. Появляется на 50 пикселей правее
3. Увеличивается в 2 раза.
4. Движется вниз на 100 пикселей.
5. Меняет цвет на красный
6. Плавно исчезает.
|
|
| Зеленый прямоугольник 40*200 пикс
| 1. Отображается в левом верхнем углу окна браузера
2. Движется к правому верхнему углу браузера.
3. Меняет прозрачность до 0,5
4. Меняет цвет на красный
5. Движется на исходную позицию в левый верхний угол
6. Увеличивает размеры в 2 раза.
|
|
| Красная окружность R=50 пикс (не использовать картинки)
| 1. Отображается в правом нижнем углу окна браузера
2. Изменяет прозрачность до 0,35
3. Изменяет радиус на 30 пикселей
4. Движется в левый верхний угол окна браузера
5. Изменяет цвет на зеленый
6. Складывается и отображается
|
|
| Слово ИСПР
| 1. Меняет регистр (с верхнего на нижний)
2. Движется на 50 пикселей вправо и на 70 вниз
3. Становится жирным
4. Движется на 20 пикселей влево и на 80 вниз
5. Становится подчеркнутым.
6. Плавно исчезает
|
|
| Серый квадрат 80*80 пикс посередине слово КВАДРАТ
| 1. Отображается в центре окна браузера.
2. Исчезает слово Квадрат
3. Появляется черная рамка толщиной 2 пикселя
4. Движется в правый верхний угол
5. Увеличивается в 3 раза
6. Движется в левый нижний угол по пути изменяя прозрачность до 0
|
|
| Черный квадрат
| 1. Отображается в центре окна браузера
2. Движется вниз до нижней границы окна браузера
3. Движется вверх до верхней границы окна браузера
4. Плавно исчезает
5. Плавно появляется
6. Изменяет цвет на зеленый
|
|
| Круг R=100 пикс (не использовать картинки)
| 1. Отображается с отступами 50 пикселей от верхней границы и 200 пикселей от левой границы
2. Изменяет радиус до 50 пикселей.
3. Изменяет цвет на красный.
4. Начинает движение в центр экрана
5. Изменяет прозрачность до 0.8
6. Движется в левый верхний угол растворяясь.
|
|
| Ваша фотография с отношением сторон 3*4
| 1. Отображается по центру вверху окна браузера.
2. Появляется подпись под фото (ФИО)
3. Фотография уменьшает размер в 2 раза
4. Движется по вертикали до нижней границы окна браузера
5. Фото меняется на другое
6. Растворяется.
|
|
| Фраза в зеленой рамке: От топота копыт пыль по полю летит
| 1. Появляется в левом нижнем углу окна браузера
2. Изменяется цвет рамки на красный
3. Движется в противоположный угол окна браузера
4. Исчезает фраза (рамка остается)
5. Движется к нижней границе окна браузера
6. Появляется фраза
|
|
| Текстовое поле ввода
| 1. Появляется с отступами 30 пикселей от нижней границы и 180 пикселей от правой границы окна браузера
2. Смещается в левый верхний угол
3. Изменяет цвет рамки на красный
4. В текстовом поле появляется слово МАМА
5. Поле перемещается в правый верхний угол
6. Исчезает
|
|
| Сама кнопка, по которой будет произведен клик
| 1. Кнопка уменьшается в размерах на 50%
2. Движется в правый верхний угол
3. Исчезает
4. Появляется в противоположном углу
5. Изменяет прозрачность до 0,5
6. Движется к верхней границе окна браузера
|
|
| Значок HTML5
| 1. Отображается в центре по горизонтали и с отступом 40 пикселей сверху
2. Увеличивает размер в 2 раза
3. Движется в правый нижний угол
4. Исчезает
5. Появляется в левом верхнем углу
6. Снова исчезает
|
|
| Серый прямоугольник со сторонами 150*50
| 1. Отображается в правом нижнем углу окна браузера
2. Плавно изменяет цвет на черный
3. Движется в противоположный угол окна браузера
4. Исчезает
5. Проявляется в левом нижнем углу
6. Уменьшается в 2 раза
|
|
| 3 вложенных друг в друга блока, с рамками разных цветов
| 1. Отображается в левом верхнем углу окна браузера
2. Все рамки меняют цвета.
3. Движется в правый нижний угол
4. Исчезает
5. Проявляется в левом нижнем углу
6. Появляется синий фон.
|
