Всплывающие подсказки на определенные слова jquery. Красивые всплывающие подсказки с помощью jQuery
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 всплывающие подсказки 31. jQuery всплывающие подсказки при наведении 32. Легкое CSS меню 33. Записки CSS3 и HTML5Реализация блоков, похожих на записки с текстом.
34. RlightboxОтображение медиаконтента во всплывающих блоках: изображения, видео, Flash.
35. jQuery зуммерУвеличение квадратной области.
36. CSS3 jQuery описание изображенийПлагин «Based Sliding Door Content Gallery» для реализации всплывающих описаний изображений. При наведении курсора на какое-нибудь из представленных изображений появляется краткое описание со ссылкой на полную статью. При наведении: эффект поднятия гаражных дверей.
37. Эффект «До и после» jQuery плагин «uCompare»Перетягивая шторку можно сравнить два наложенных друг на друга изображения. Идеально подойдет для тех случаев, когда необходимо оформить два варианта чего-либо на странице: до и после.
38. Эффект вращения изображения 39. Интерактивные карты мира и Европы и США 40. Слайд-шоу «Slider.js v1.1»Несколько различных анимированных эффектов перехода между слайдами.
Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, которые будут выводиться при наведении курсора мыши на специальную метку.
ИдеяХочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент div с содержанием подсказки и установить для него атрибуты HTML5 data для позиционирования.
Атрибуты HTML5 data и jQueryHTML5 имеет отличный инструмент - пользовательские атрибуты data , который позволяет хранить произвольный набор метаданных. Данный атрибут позволяет избежать использования атрибутов rel или title для различных задач в Javascript.
Синтаксис атрибута data имеет вид:
А в jQuery получить значение можно следующим образом:
Var test = $("div").data("foo");
В данном уроке атрибут data будет использоваться для хранения координат метки.
HTMLСеверная Америка
- Площадь (кв.км): 24,490,000
- Население: 528,720,588
- #wrapper - данный элемент является контейнером для всех остальных элементов.
- img -изображение, которое будет служить фоном.
- .pin - абсолютно позиционируемый элемент, который содержит метку и содержание подсказки, которое будет выводиться обработчиком события. Класс pin-down определяет тип метки.
- data-xpos="450" data-ypos="110" - атрибут HTML5 data , который хранит координаты X (по горизонтали) и Y (по вертикали) в px для позиционирования метки. В данном примере метка будет располагаться на 450px от левой стороны изображения и на 110px сверху.
Код CSS достаточно простой и очевидный:
/* Относительное позиционирование */ #wrapper { position: relative; margin: 50px auto 20px auto; border: 1px solid #fafafa; -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5); box-shadow: 0 3px 3px rgba(0,0,0,.5); } /* Скрываем оригинальное содержание подсказки */ .pin { display: none; } /* Стили для подсказкии и метки */ .tooltip-up, .tooltip-down { position: absolute; background: url(arrow-up-down.png); width: 36px; height: 52px; } .tooltip-down { background-position: 0 -52px; } .tooltip { display: none; width: 200px; cursor: help; text-shadow: 0 1px 0 #fff; position: absolute; top: 10px; left: 50%; z-index: 999; margin-left: -115px; padding:15px; color: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7); -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7); box-shadow: 0 3px 0 rgba(0,0,0,.7); background: #fff1d3; background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90)); background: -webkit-linear-gradient(top, #fff1d3, #ffdb90); background: -moz-linear-gradient(top, #fff1d3, #ffdb90); background: -ms-linear-gradient(top, #fff1d3, #ffdb90); background: -o-linear-gradient(top, #fff1d3, #ffdb90); background: linear-gradient(top, #fff1d3, #ffdb90); } .tooltip::after { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #fff1d3; border-left: 10px solid transparent; border-right:10px solid transparent; } .tooltip-down .tooltip { bottom: 12px; top: auto; } .tooltip-down .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-top: 10px solid #ffdb90; } .tooltip h2 { font: bold 1.3em "Trebuchet MS", Tahoma, Arial; margin: 0 0 10px; } .tooltip ul { margin: 0; padding: 0; list-style: none; }
jQuery $(document).ready(function(){
// Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения
$("#wrapper").css({"width":$("#wrapper img").width(),
"height":$("#wrapper img").height()
})
//Направление символа подсказки
var tooltipDirection;
for (i=0; i