17 jQuery CSS техник и плагинов, которые вам могут пригодиться при разработке сайтов

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

Внимание: все ссылки с демонстрацией скриптов откроются в новом окне, ссылки для скачивания исходников — прямые.

1. Новая jQuery галерея с миниатюрами

Профессиональная jQuery галерея 2011 года.

2. Ротация блоков c использованием jQuery

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

3. jQuery CSS галерея с автоматической сменой слайдов

Похожая галерея уже была опубликована ранее в одной из заметок в моем блоге. В новом варианте просто добавилась возможность автоматической смены слайдов. Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

4. Анимированное jQuery меню

Свежее симпатичное меню на jQuery.

5. Плагин «Randomizer App w/ jQuery»

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

Процесс выбора победителей состоит из трех шагов. На первом вы вписываете всех участников в виде:Name, e-mail. Каждый участник вписывается с новой строки, запятой отделяются имена и электронные ящики участников. На втором шаге вписываются возможные призы в виде: Приз, количество. Название каждого приза тоже вписывается с новой строки. На третьем шаге скрипт определяет победителей. Т.е. случайным образом участникам присваиваются случайные призы. При этом плагин не позволит вам указать количество призов большее, чем количество участников.

6. jQuery плагин «jSnow»

Плагин для создания падающих элементов на странице.

7. Меню с использованием спрайтов

Анимированное JavaScript меню с эффектом свечения.

8. Исправление ошибки отображения прозрачности PNG в IE6

Плагин «PngFix». Простое jQuery решение для исправления бага с отображением прозрачности PNG изображений в браузере Internet Explorer 5.5 и 6. Как вы, наверное, знаете, эти версии браузера не поддерживают отображение прозрачности у PNG изображений и отображают ее в виде серого фона. Этот плагин исправляет ошибку в отображении как фоновых PNG файлов, так и обычных изображений, вставленных на странице с помощью тега IMG.

9. Оригинальное оформление чекбоксов с помощью jQuery

10. Всплывающие подсказки jQuery

Всплывающие подсказки с полупрозрачным фоном.

11. Выпадающее мега-меню jQuery

Еще один вариант выпадающего меню с большим количеством подпунктов. В последнее время подобные меню стали очень популярными.

12. Форма отправки данных без перезагрузки страницы на jQuery

13. Динамическое создание красивых нумерованных элементов с помощью jQuery

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

14. jQuery плагин «MobilySelect»

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

15. Масштабируемый фон страницы с применением jQuery

jQuery плагин «Fullscreenr». Изображение всегда растягивается на все окно браузера. Если размер окна уменьшить, то до определенного размера уменьшится и само фоновое изображение.

16. jQuery плагин слайд-шоу «Easy Slides» v1.1

Простой в использовании JQuery плагин для создания слайд-шоу.

17. Плагин «jQuery Slidy»

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

Вы можете посмотреть похожие заметки: