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

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

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

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

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

Слайдер на jQuery

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

2. Слайд-шоу

Слайд-шоу на jQuery

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

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

Выпадающее меню

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

Меню аккордеон

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

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

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

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

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

Ротатор контента на jQuery

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

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

Аккордеон на jQuery

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

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

Меню на jQuery

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

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

Слайд-шо на jQuery

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

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

Прилетающая газета: эффект jQuery

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

Слайдер на jQuery

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

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

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

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

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

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

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

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

Плагин jQuery для создания постраничного разбиения

15. Плагин Plasm The Wall

Стена на jQuery

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

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

05.08.2011
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus