Jquery всплывающее изображение при наведении. Набор полезных jQuery Ajax CSS3 фишек для веб-разработчиков. jQuery плагин «Magnifier»
Интересный текстовый эффект при наведении с использованием jQuery.
Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.
3. Классное оформление диаграмм на сайте
Анимированная круговая диаграмма, созданная с использованием JavaScript библиотеки Raphaël.
Легкое выпадающее CSS3 меню для сайта.
Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.
6. Фоновая jQuery анимация на странице
Анимированный jQuery эффект при перемещении курсора по экрану.
7. Плагин «Blackbird»
Функциональное решение аналог alert() в JavaScript. Вы сможете подробнее почитать об использовании «Blackbird» на демонстрационной странице.
8. Ajax библиотека JSF компонентов «OpenFaces»
Набор различных Ajax компонентов на JFS фреймворке с открытым исходным кодом для создания элементов пользовательского интерфейса. В набор компонентов входят самые распространенные элементы интерфейса: компоненты для работы с таблицами и графиками, вкладки, всплывающие окна, фильтры, меню, календари, компоненты для работы с формами и много других Ajax решений. Вы можете посмотреть все компоненты в действии на демонстрационной странице. «OpenFaces» распространяется по двум видами лицензий: бесплатной и коммерческой.
9. «Wijmo» набор jQuery UI виджетов для создания элементов пользовательского интерфейса
Коллекция профессиональных виджетов для веб-разработчиков. В набор «Wijmo» входят следующие бесплатные jQuery решения: аккордеоны , календари , всплывающие диалоговые окна , экспандеры , стилизованные формы , различные списки , меню , индикаторы загрузки «progressbar», вкладки (табы), всплывающие подсказки и другие полезные виджеты. Разработчики «Wijmo» предлагают помимо бесплатных решений также качественные коммерческие jQuery UI наработки. После скачивания архива, вы сможете посмотреть все возможные виджеты в действии, они находятся в дериктории wijmo-open/development-bundle/samples/. Этот набор обязательно сэкономит вам уйму времени при разработке ваших веб-проектов.
10. Оформление поискового поля с применением jQuery
Анимированное оформление поля для ввода поискового запроса. Эффект можно наблюдать при клике мышкой в поле ввода. Кнопка для начала поиска появляется после ввода запроса с клавиатуры.
11. «Flux Slider» слайдер на jQuery и CSS3
Плагин для создания масштабируемого текста в зависимости от размера окна браузера. Чем больше размер окна браузера, тем больше размер текста Имейте в виду, что этот эффект не стоит использовать для обычного текста в параграфах. Он подойдет только для отображения огромных надписей, например, на промо-сайтах. Пример можно посмотреть на демонстрационной странице. Попробуйте изменять размер окна, чтобы увидеть эффект.
13. Слайд-шоу «Awkward»
Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.
14. jQuery плагин «jQueryZoom»
С помощью этого плагина вы сможете добавить эффект увеличения изображения при наведении или добавить наложение на него. Плагин легко настроить для ваших нужд.
15. jQuery галерея «jSwitch»
Анимированная jQuery галерея.
16. JavaScript галерея с 3D эффектом
Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.
18. Новое CSS3 меню в стиле AppleНовое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.
19. Свежая реализация всплывающих подсказок на jQuery «Tooltipsy»
Много различных эффектов появления всплывающих подсказок при наведении.
20. JavaScript галерея для просмотра на мобильных устройствах «PhotoSwipe»
Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).
21. Стильное CSS3 меню
Эффект увеличения области изображения при наведении.
23. Ajax корзина заказов «Easy Basket» для интернет-магазина
Функциональная корзина заказа для интернет-магазина с интегрированными методами оплаты товара с помощью PayPal или Google Checkout. Используемые технологии: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Легко встраивается в веб-страницу и настраивается внешний вид корзины.
24. jQuery плагин «Grid Navigation Effects»
Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом jQuery решении также предусмотрен эффект при наведении курсора на миниатюру.
25. Фоновый эффект «Vertical Parallax»5. Переключение вида отображения блоков на jQuery
С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.
26. Аналоговые часы на jQuery
Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории.
28. Галерея с миниатюрами «TN3 Gallery»
jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.
29. Описание изображений «Preview window»
Плагин для подписи изображений. При наведении курсора мыши с анимированным эффектом появляется описание изображения. Для создания анимации используется jQuery.
30. JavaScript карусель
В правом верхнем углу слайда можно включить/выключить автоматическую смену слайдов.
37. Выпадающее меню «jbar»
Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все - пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.
39.jQuery слайд-шоу
Слайд-шоу с оригинальным эффектом смены изображений.
40. Анимированный jQuery CSS3 эффект
jQuery галерея с подписью изображений. Несколько эффектов смены слайдов. Навигации между изображениями осуществляется либо с помощью стрелок, либо по нажатию на миниатюру.
Фоновый эффект (движение по слоям). На демонстрационной странице поводите мышкой по экрану, чтобы увидеть эффект в действии.
43. jPaginator CSS3 плагин постраничного разбиения
Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.
1. Обалденное слайд-шоу на jQuery «Elastic Slideshow»
Слайд-шоу с миниатюрами и описанием слайдов. Различные эффекты смены изображений. Предусмотрено два варианта: с автоматической сменой слайдов и без.
2. Pure CSS3 Slider
Симпатичный слайдер изображений с описанием и автоматической сменой слайдов. При наведении курсора на изображение ротация останавливается. Остановка сопровождается CSS3 эффектом.
3. jQuery плагин «Фоторама»
Хорошая галерея-слайдер.
4. Текстовые эффекты «Typography Effects»
Интересные эффекты для работы с типографикой с помощью CSS3 и jQuery. 7 различных классных эффектов.
5. Плагин «Darkbox»
Небольшой легкий плагин для отображения изображений во всплывающем блоке.
6. Hover-эффект на jQuery
Круговой эффект при наведении.
7. Анимированные jQuery CSS3 кнопки
Много различных анимированных CSS3 эффектов для создания потрясающих кнопок для вашего сайта. Просто очень клевые эффекты при наведении.
8. HTML5 jQuery смена фоновых изображений
При нажатии на миниатюры фоновые изображения сменяют друг друга с эффектом размытия. При изменении размера окна браузера изменяется размер фонового изображения.
8. Interactive Typography Effects
Интересные текстовые эффекты с использованием HTML5 и jQuery (4 различных эффекта). Наведите курсор на текст, чтобы увидеть эффект.
9. Всплывающие подписи изображений
Много различных анимированных эффектов при наведении для реализации всплывающих подписей изображений.
10. Плагин «Portamento»
Плавающий блок на jQuery. Всегда остается в зоне видимости при прокрутки страницы вниз.
11. Скроллеры содержимого
jQuery плагин для отображения прокрутки в блоках фиксированных размеров. Несколько стилевых оформлений.
12. Плагин «Scrollbars»
jQuery реализация горизонтальной и вертикальной прокрутки содержимого в блоке фиксированных размеров.
13. Плагин «Tiny Scrollbar»
jQuery плагин для реализации вертикальной и горизонтальной прокрутки контента.
Демо
Скачать
14. Плагин «jScrollPane»
Кросс-браузерная прокрутка содержимого в блоке.
15. Плавающий блок «Scroll Follow»
Плагин для создания блока, который будет прокручиваться следом за прокруткой страницы. Есть возможность зафиксировать блок, по нажатию на ссылку.
16. Всплывающие панели «SideBar»
Выезжающие панели со всех сторон веб-страницы.
17. Эффектные CSS3 решения для оформления страницы-заглушки
Три варианта реализации анимированных эффектов для создания заглушки «Сайт в разработке».
17. Эффект при прокрутке страницы
Изумительный эффект при прокрутке страницы: элементы выезжают из области за экраном или наоборот прячутся за область экрана. Подобное решение отлично подойдет для применения на сайтах-портфолио, для эффектного представления выполненных проектов с кратким описанием.
19. Плагин «fancyBox 2»
Новая, полностью переписанная версия известного многим плагина fancybox, для отображения изображений и другого содержимого в модальных окнах.
20. Minimit Gallery
Функциональный плагин с большим набором возможностей: галерея, карусель, слайдер, меню, экспандер, анимированные кнопки.
21. jQuery News TickerРотатор новостей на сайте. Сообщения сменяют друг друга и появляются с использованием интересного эффекта печатной машинки. Смену новостей можно остановить, нажав на кнопку «Пауза». Стрелочками можно переходить от одного сообщения к другому.
22. Adaptive Images
Масштабируемые изображения для отображения на мобильных устройствах. Размеры изображений зависят от размера окна. Используемые технологии: JavaScript и PHP5.
23. vScroller
Вертикальный jQuery, CSS3 скроллер. Настраивается скорость прокрутки и время задержек.
24. Многоуровневое выпадающее меню «jQSimpleMenu»
Свежий jQuery плагин для создания многоуровневых горизонтальных выпадающих меню на сайте.
25. «jsCarousel 2.0»
jQuery плагин для реализации вертикальных и горизонтальных каруселей.
26. Ротатор «Dynamic News»
jQuery плагин для симпатичного отображения последних новостей из RSS ленты.
27. Анимированное меню
Анимированный эффект при наведении на пункт меню.
28. Анимированный текстовый эффект
Три эффектных примера работы с CSS свойством «background-clip: text». CSS3 эффект не работает в старых браузерах.
29. CSS3 jQuery эффект размытия
При наведении курсора на блок он увеличивается, а остальные блоки с текстом размываются на заднем плане.
30. CSS3 jQuery всплывающие подсказки
Реализация блоков, похожих на записки с текстом.
34. Rlightbox
Отображение медиаконтента во всплывающих блоках: изображения, видео, Flash.
35. jQuery зуммер
Увеличение квадратной области.
36. CSS3 jQuery описание изображений
Плагин «Based Sliding Door Content Gallery» для реализации всплывающих описаний изображений. При наведении курсора на какое-нибудь из представленных изображений появляется краткое описание со ссылкой на полную статью. При наведении: эффект поднятия гаражных дверей.
37. Эффект «До и после» jQuery плагин «uCompare»
Перетягивая шторку можно сравнить два наложенных друг на друга изображения. Идеально подойдет для тех случаев, когда необходимо оформить два варианта чего-либо на странице: до и после.
38. Эффект вращения изображения
Несколько различных анимированных эффектов перехода между слайдами.
Браузеры автоматически создают всплывающие подсказки, когда веб-мастера прописывают в атрибут title
какой-либо текст (как правило, атрибут title
применяется к тегам
и
, т.е. к ссылкам и изображениям). Когда пользователи наводят курсором мыши на теги, в которых присутствует атрибут title
, то браузер отображает всплывающую подсказку. Именно такие всплывающие подсказки (tooltip
) мы и будем редактировать.
В данной статье будет рассмотрено:
- как использовать плагин для замены стандартных всплывающих подсказок - как настроить qTip tooltips - как отобразить Ajax контент во всплывающей подсказке Простые пользовательские текстовые всплывающие подсказкиНадеюсь не нужно объяснять, что такие атрибуты как title, alt, часто бывают крайне необходимы. Ведь они помогают пользователям лучше ориентироваться в большом количестве информации и, к тому же, крайне полезны для поисковой оптимизации сайта. Единственная проблема с подсказками - они не могут быть изменены при помощи CSS стилей. Для решения этой проблемы задействуем возможности .
1. Создадим базовый каркас HTML файла, который содержит с атрибутом title.
Перечень ссылок:
- Главная
- О компании
- Контакты
- Портфолио
2. Теперь необходимо загрузить плагин qTip из репозитария.
3. Подключаем скаченные файлы:
// Стандартная библиотека jQuery //В этом файле будем прописывать jQuery скрипты
4. Для работы всплывающей подсказки достаточно прописать в scripts.js :
$(document).ready(function(){ $("a").qtip(); });
Эта конструкция означает, что для всех ссылок, у которых присутствует атрибут title будет применен метод qtip() .
Настройка jQuery qTip1. Настраивать всплывающие подсказки можно по-разному. Для начала изменим позицию, с которой будут отображаться подсказки.
$("a").qtip({ position: { my: "bottom center", //Положение курсора at: "top center", //Положение всплывающей подсказки viewport: $(window) //Подсказка не будет вылизать за края экрана } });
2. После настройки позиции, можно заняться цветовой схемой отображения подсказки. По умолчанию в файле jquery.qtip.min.css содержатся следующие цветовые стили:
Qtip-default (желтый стиль по умолчанию)
Qtip-bootstrap
К некоторым из этих стилей можно добавить тень: qtip-shadow . К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим , хотя и стандартных более чем предостаточно.
$("a").qtip({ position: { my: "bottom center", at: "top center", viewport: $(window) }, style: { classes: "qtip-green qtip-shadow" } });
Создание навигационного меню с всплывающимися подсказками1. Для начала создадим HTML каркас :
#navigation { background: rgb(132,136,206); /* Old browsers */ background: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,206,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(132,136,206,1)), color-stop(50%,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr="#8488ce",GradientType=0); /* IE6-9 */ background: linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* W3C */ list-style-type: none; margin: 100px 20px 20px 20px; padding: 0; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #navigation li { margin: 0; padding: 0; display: block; float: left; border-right: 1px solid #4449a8; } #navigation a { color: #fff; border-right: 1px solid #8488ce; display: block; padding: 10px; } #navigation a:hover { background: #859900; border-right-color: #a3bb00; }
В результате должна получиться следующая картина:
3. В файл scripts.js добавим:
$("#navigation a").qtip({ position: { my: "top center", at: "bottom center", viewport: $(window) }, show: { effect: function(offset) { $(this).slideDown(300); } }, hide: { effect: function(offset) { $(this).slideUp(100); } }, style: { classes: "qtip-green qtip-shadow", } });
Теперь, при наведении курсора мыши на навигационное меню, будет отображаться всплывающая подсказка (атрибут title).
Отображение другого контента во всплывающей подсказкеКроме отображения стандартных тегов, во всплывающей подсказке можно отобразить и другой контент, например взятый из файла, из скрытого контейнера, или базы данных, причем без перезагрузки страницы при помощи Ajax технологии.
Эта ссылка берет контент из файла при помощи Ajax
Значение атрибута href=”tooltip.txt” означает, что гиперссылка ссылается на обычный txt файл.
$(".infobox").each(function(){ $(this).qtip({ content: { text: "Загрузка...", //Пока грузится контент, будет отображаться эта запись ajax: { url: $(this).attr("href") //Откуда брать контент }, title: { //Добавляет поле с заголовком в tooltip text: $(this).attr("title"), button: true //Добавляет кнопку для закрытия подсказки } }, position: { my: "top center", at: "bottom center", effect: false, //Убирает выезжающий эффект viewport: $(window) }, show: { event: "click", //Подсказка отобразиться при нажатии на ссылку, можно заменить на ‘hover’, тогда подсказка отобразиться при наведении solo: true //Позволяет отобразить только один tooltip на экране }, hide: "unfocus", //Подсказка закроется при клике по другому элементу страницы style: { classes: "qtip-green qtip-shadow" } }); }).bind("click", function(e){e.preventDefault()}); //При нажатии на ссылку браузер не будет загружать url
Данный Ajax прием работает только при запущенном сервере. Чтобы он заработал на локальном компьютере необходимо установить, к примеру, .
Пока не забыл, какие плюсы и минусы есть у радиаторов алюминиевых секционных и какие радиаторы обычно выберают потребители.
(cкачиваний: 409)
1. jQuery плагин «Hover Zoom»Оригинальное решение для реализации описания изображений при наведении курсора с использованием Zoom эффекта.
2. Плагин «Captify» 3. jQuery описание изображений в галерееПри наведении курсора появляется описание изображения, а сама картинка заливается полупрозрачным слоем, определенного цвета.
4. jQuery реализация подписей изображенийНесколько вариантов реализации подписей для изображений, которые появляются при наведении на картинку курсора мыши.
5. jQuery эффект раздвижных дверейПри наведении на миниатюру на ее месте эффектно появляется описание.
6. jQuery плагин «Zoominfo»При наведении курсора на изображение оно уменьшается и появляется название и описание фото.
7. jQuery плагин «Mosaic»Реализация всплывающих описаний изображений при наведении курсора мыши. Предусмотрено 8 различных видов всплывающих подписей. Вы сможете их посмотреть на демонстрационной странице.
При наведении курсора мыши на изображение выезжает краткое описание со ссылкой на подробную информацию.
9. Плагин для реализации подписи изображенийЕще один вариант реализации всплывающих подписей изображений при наведении курсора. Есть возможность выбрать из двух jQuery эффектов появления подписей.
10. Описание изображений «Preview window»Плагин для подписи изображений. При наведении курсора мыши с анимированным эффектом появляется описание изображения. Для создания анимации используется jQuery.
Подготовлено по материалам
Идею я подсмотрел на сайте электронного бухгалтера «Эльба «. Там приятный и удобный интерфейс, и мне очень понравились всплывающие подсказки, которые присутствуют повсюду.
Я хотел было просто взять из исходников сайта код скрипта, который реализует это дело, но не тут-то было. Там у них столько разных скриптов, собранных в одну кучу (не знаю, как это правильно называется на профессиональном языке), что выудить оттуда что-то конкретное мне было затруднительно.
Поэтому я взял и написал свой скрипт, который делает примерно то же самое. Я знаю, что есть уже множество готовых решений, но мне интереснее самому написать скрипт с нуля, чтобы в очередной раз попрактиковаться с jQuery.
ДемонстрацияПример вы можете наблюдать как на сайте Share42.com , так и на , где в исходнике присутствует только то, что необходимо для работы скрипта.
УстановкаКод скрипта выглядит следующим образом:
(function($){ $(function() { $("span.jQtooltip").each(function() { var el = $(this); var title = el.attr("title"); if (title && title != "") { el.attr("title", "").append("" + title + ""); var width = el.find("div").width(); var height = el.find("div").height(); el.hover(function() { el.find("div") .clearQueue() .delay(200) .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { el.find("div") .animate({width: width + 20, height: height + 20}, 150) .animate({width: "hide", height: "hide"}, 150); }).mouseleave(function() { if (el.children().is(":hidden")) el.find("div").clearQueue(); }); } }) }) })(jQuery)
Сохраните его в файл с расширением.js, например, scripts.js и подключите к сайту перед тегом , не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:
JQtooltip { position: relative; cursor: help; border-bottom: 1px dotted; } .jQtooltip div { display: none; position: absolute; bottom: -1px; left: -1px; z-index: 1000; width: 190px; padding: 8px 12px; text-align: left; font-size: 12px; line-height: 16px; color: #000; box-shadow: 0 1px 3px #C4C4C4; border: 1px solid #DBB779; background: #FFF6BD; border-radius: 2px; }
Теперь осталось поместить необходимый текст в тег с классом jQtooltip и атрибутом title , т.е. вот так:
текст
Если вы желаете, чтобы вместо текста был квадратик, как в , тогда в CSS-файл нужно добавить еще такие стили:
JQtooltip.mini { display: inline-block; vertical-align: bottom; font-size: 11px; width: 14px; line-height: 13px; text-align: center; margin-left: 2px; top: -2px; color: #9A4D18; border: 1px solid #FAD28F; background: #FFF6BD; border-radius: 2px; }
А html-код в этом случае будет таким:
!
В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т.е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.
Вот, собственно, и все.
P.S. Не сомневаюсь, что скрипт можно сделать и более грамотным, но меня, в принципе, устраивает и то, что получилось.
Ищите, где разместить свой сайт в Украине? Выбирайте хостинг , проверенный временем — X-HOST. Вы получите качественный и надежный хостинг по выгодным тарифам.
