Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Меню со всплывающими подсказками
В данном примере показана реализация меню со всплывающими подсказками. Как известно, событие hover устанавливает обработчики двух событий: mouseenter (появления курсора на элементе) и mouseleave (выход курсора из элемента). Итак, когда курсор появляется над элементом меню, происходит поиск ближайшего элемента em, которому назначается следующий блок объявлений CSS: opacity: "show", top: "-75". Благодаря этому ранее спрятанный элемент em (спрятан он в теге li, где распложен за ссылкой) как бы опускается (опускается он потому, что изначально свойство top имеет значение -85) и медленно (slow) проявляется. Далее, когда пользователь убирает курсор с элемента меню, происходит выборка того же самого ближайшего (next) элемента em, который быстро (fast) возвращается на прежнее место (top: -85px) и затухает (благодаря значению hide свойства opacity). Вот и все: прекрасная анимация для hover эффекта готова. Элементы меню показаны на рисунке 15.
Рисунок 15 – элементы меню
Код программы: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Анимация для события hover </title> <!--удаленная инициализация библиотеки jQuery--> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){ //добавление обработчика для события hover для элементов a $(".menu a").hover(function() { $(this).next("em").stop(true,true) // останавливаем всю текущую анимацию //тип анимации и скорость появления всплывающей подсказки .animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").stop(true,true) // останавливаем всю текущую анимацию //тип анимации и скорость исчезновения всплывающей подсказки .animate({opacity: "hide", top: "-85"}, "fast"); });
}); </script> <!--оформление блоков, инициализация изображений, шрифты и т.д.--> <style type="text/css"> body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } .menu { margin: 100px 0 0; padding: 0; list-style: none; } .menu li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .menu a { padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url(images/button.gif) no-repeat center center; } .menu li em { background: url(images/hover.png) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2;
display: none; } </style> </head> <body> <!--URL, тексты меню и подсказок--> <ul class="menu"> <li> <a href="http://www.knastu.ru">КнАГТУ</a> <em>Сайт Комсомольского-на-Амуре государственного технического университета</em> </li> <li> <a href="http://ruseller.com">Ruseller</a> <em>Уроки по созданию сайта, материалы и исходники.</em> </li> <li> <a href="http://anton.shevchuk.name/javascript/jquery-for-beginners/">jQuery для начинающих</a> <em>Наглядные интерактивные уроки по jQuery</em> </li> </ul> </body> </html>
Результат: Результат работы кода представлен на рисунке 16. При наведении курсора мыши на соответствующий блок, запускается анимация появления блока с текстом-подсказкой для выбранного блока. По нажатию любого их трех блоков происходит переход по URL на соответствующий ресурс.
Рисунок 16 – демонстрация работы меню
|
||||||||
|
|
Последнее изменение этой страницы: 2016-12-28; просмотров: 230; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.221.174.248 (0.008 с.) |
