FotoItalia Четверг, 2024-03-28, 6:31 PM
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Фотография » Фотография - основные понятия » ФотогКак создать красивую всплывающурафия - основные понятия
ФотогКак создать красивую всплывающурафия - основные понятия
adminfotoitaliaДата: Воскресенье, 2010-11-21, 1:12 PM | Сообщение # 1
Генерал-полковник
Группа: Администраторы
Сообщений: 5
Репутация: 0
Статус: Offline
Как создать красивую всплывающую подсказку с помощью jQuery
В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.

В этом нам поможет jQuery.
С самого начала документа подключаем фреймворк:
-
Code
<script src="jquery.tools.min.js"></script>

-
Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:
-
Code
<link rel="stylesheet" type="text/css" href="tooltip.css"/>

-
В теле документа нам понадобится следующий код:
-
Code
<a href="#" id="trigger">
Move the mouse over this box to see the tooltip in action.
</a>
<!-- tooltip element -->
<div class="tooltip">
<h3>The Tooltip</h3>
<p>
<strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong>
</p>
<p>
Tooltips can contain any HTML such as links, images, forms and tables.
This tooltip is vertically centered on the top edge of the trigger element.
</p>
</div>

-
Класс "trigger" - это видимый объект на странице, а "tooltip" - это то, что должно появится при наведении мышки.

После этого кода нам необходимо инициализировать функцию.
-
Code
<script>
$.tools.addTipEffect("slidedown",

// opening animation
function() {
var opacity = this.getConf().opacity;
this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show();
},

// closing animation
function() {
this.getTip().animate({top: '+=15', opacity:0}, 300, function() {
$(this).hide().animate({top: '+=30'}, 0);
});
}
);

Добавлено (2010-11-21, 1:05 PM)
---------------------------------------------
angry surprised

Добавлено (2010-11-21, 1:12 PM)
---------------------------------------------
surprised smile sad

 
natayovzhikДата: Пятница, 2019-12-27, 3:03 PM | Сообщение # 2
Рядовой
Группа: Пользователи
Сообщений: 7
Репутация: 0
Статус: Offline
smile
 
Форум » Фотография » Фотография - основные понятия » ФотогКак создать красивую всплывающурафия - основные понятия
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2024
Сделать бесплатный сайт с uCoz