От автора: Сегодня речь пойдет о таком немаловажном объекте страницы сайта как всплывающая подсказка (всплывающий блок) который мы напишем на HTML, CSS и jQuery. Вещь довольно-таки простая. Очень часто используется на сайтах. Поэтому я решил показать, каким образом она устроена и как работает.
Перед тем, как мы приступим к созданию всплывающей подсказки, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1: код всплывающей подсказки HTML и CSS
Для начала создайте папку, например folder, и поместите в ее директорию файл index.html. Этот файл должен содержать следующий HTML-код всплывающей подсказки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Task - Popup block</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".main_block .img").hover(function() { $(this).next(".popup_block").stop(true,true) .animate({opacity: "show", top: "-60"}, "slow"); }, function() { $(this).next(".popup_block").stop(true,true) .animate({opacity: "hide", top: "-85"}, "normal"); }); }); </script> </head> <body> <div class="main_block"> <div class="in"> <div class="img"></div> <div class="popup_block"><p>Всем привет!<br/> Я Бенджамин.</p></div> </div> </div> </body> </html> |
После этого в папке folder создайте папку css и поместите в нее файл style.css, который должен содержать следующий CSS-код всплывающей подсказки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
body { margin: 0; padding: 0; } .main_block { margin: 100px 0 0 100px; padding: 0; } .main_block .in { position: relative; margin: 0; padding: 0; float: left; } .main_block .img { width: 100px; height: 89px; background: url(../img/img.jpg) no-repeat; margin: 0; padding: 0; } .main_block .img:hover{ width: 100px; height: 89px; background: url(../img/img_hover.jpeg) no-repeat; margin: 0; padding: 0; } .main_block .in .popup_block{ width: 180px; height: 55px; background: url(../img/poupblock.jpg) no-repeat; display: none; position: absolute; top: -85px; margin: 0; padding: 0; } .main_block .in .popup_block p{ font: bold oblique 12px Verdana; margin: 10px 0 0 15px; padding: 0; } |
Не забываем про нашу JS-библиотеку. Создаем в папке folder папку js и помещаем в нее файл jquery-1.4.2.js.
В итоге, после выполнения вышеописанных действий, в окне нашего браузера Вы можете увидеть следующее:
Для того, чтобы увидеть всплывающий блок в действии, Вам необходимо навести курсор мышки на изображение. После наведения в окне Вашего браузера появится всплывающий блок:
Шаг 2: код всплывающей подсказки jQuery
Разберем данный урок более подробно, чтобы понять, как все устроено. Для этого нам будет необходимо рассмотреть код файла index.html и style.css.
Для того, чтобы достичь необходимого нам эффекта, появления всплывающей подсказки (блока), следует создать два блока и написать мини-скрипт всплывающей подсказки на jQuery, который отвечает за их взаимодействие.
Итак, создаем блок img и блок popup_block. Блок img будет основным блоком, а popup_block – второстепенным, т.е. всплывающим.
Блоку popup_block необходимо обязательно задать следующие свойства: display: none;(блок невидимый), position: absolute; (абсолютное позиционарование).
После этого пишется скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ $(".main_block .img").hover(function() { $(this).next(".popup_block").stop(true,true) .animate({opacity: "show", top: "-60"}, "slow"); }, function() { $(this).next(".popup_block").stop(true,true) .animate({opacity: "hide", top: "-85"}, "normal"); }); }); </script> |
Чтобы все стало более понятным, вот перечень с пояснениями использованных функций и их параметров:
hover – использована для того, чтобы по наведению на блок img появлялся блок popup_block;
animate – функция отвечающая за нестандартное появление и скрытие блока popup_block(появление/скрытие с затуханием).
Функция animate использована в данном примере два раза: один раз для открытия блока popup_block (параметр "show"), второй — для скрытия (параметр "hide"). Хочу привлечь Ваше внимание также к параметрам "slow" и "normal". Они отвечают за скорость появления и скрытия блока img.
Что касается файла style.css, то тут все просто. Стоит обратить внимание на свойства блоков img и popup_block.
Блок img является блоком с фиксированной высотой и шириной (width: 100px; и height: 89px;), имеет фоновое изображение (background: url(../img/img.jpg) no-repeat;). При наведение на него меняет свое фоновое изображение (background: url(../img/img_hover.jpeg) no-repeat;).
Блок popup_block также имеет свое фоновое изображение (background: url(../img/poupblock.jpg) no-repeat;) и высоту с шириной (width: 180px; и height: 55px;).
Как уже было замечено ранее, для того чтобы блок появлялся и мог исчезать, ему необходимо быть изначально невидимым (display: none;) и иметь абсолютное позиционирование (position: absolute;).
Пару слов о блоке in. Он является как бы блоком-родителем. Следовательно, должен иметь относительное позиционирование (position: relative;).
Заключение урока по созданию всплывающей подсказки для сайта.
На простом примере мы создали и разобрали работу всплывающей подсказки на HTML, CSS и jQuery. Но, просмотрев данный урок, не думайте, что данная вещь бесполезна. Используется она довольно часто, и Вы ни один раз еще столкнетесь с нею. Немного изменив дизайн, она подойдет под любой всплывающий объект, начиная от маленькой подсказки и заканчивая мини-страничкой.
Автор: Михаил Влащенко
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (19)