jQuery полезности для веб-мастеров. Часть 7

15 jQuery CSS решений  2011 года: постраничный навигатор, выпадающие меню, меню-аккордеон, слайдеры и слайд-шоу, реализация портфолио, фоновый эффект и другие новые JavaScript решения. Это седьмая часть из серии jQuery плюшек. 

Не пропустите следующую часть — подпишитесь на обновления в блоге. 

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

1. Слайдер «gSlide»

jQuery слайдер. При нажатии на плюс можно увеличить изображение.

2. Слайд-шоу

В правом верхнем углу слайда можно включить/выключить автоматическую смену слайдов.

3. Выпадающее меню «jbar»

4. Многоуровневое разъезжающееся меню в стиле аккордеон

Многоуровневое jQuery меню-аккордеон.

5. Стена-портфолио на jQuery

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

6. Ротатор контента

Навигация между слайдами с контентом может осуществляться с помощью стрелок или по нажатию на миниатюру. Снизу есть кнопка «Show», позволяющая скрыть/показать миниатюры или полное описание слайда.

7. Вертикальный аккордеон на jQuery

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

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

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все — пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

9.jQuery слайд-шоу

Слайд-шоу с оригинальным эффектом смены изображений.

10. Анимированный jQuery  CSS3 эффект

11. Галерея изображений jQuery

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

12. Фоновый эффект на jQuery

Фоновый эффект (движение по слоям). На демонстрационной странице поводите мышкой по экрану, чтобы увидеть эффект в действии.

13. Круговая галерея jQuery

Изображение и его миниатюры выполнены в виде кругов.

14. jPaginator CSS3  плагин постраничного разбиения

15. Плагин Plasm The Wall

Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.

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