Скрипты

lcrm-saas-v1-0-5-сервис-saas LCRM SAAS-это программное обеспечение CRM, которое вы можете запускать на своем собственном сервере и предлагать его в качестве продукта SAAS бесплатно...
smartend-v4-1-панель-администратора-laravel-с-интерфейсом-и-restful-api SmartEnd-это отличительная админ панель (панель управления) со всеми опциями, которые вам могут понадобиться для создания любых типов веб-сайтов на...
smart-invoice-system-v1-9-2-система-управления-счёт-фактурами Это мощное веб-приложение, основанное на PHP codeigniter framework для управления...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Всплывающие подсказки на JQuery

45534522В данном уроке мы рассмотрим принцип создания появляющихся подсказок на JQuery в которых может находиться не только текст но и картинка или ссылка.

k_prim2

 

И так приступим к созданию этой  полезной вещи. Создадим новый HTML документ и просто вставим следующий код между тегами <body> </body> это будет основа для появляющихся подсказок.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="bubbleInfo">
<div><span id="download" class="trigger"><strong>Наведите на меня мышку<IMG src="http:// images/ icon_smile.gif" alt=":)" class="wp-smiley"> </strong></span></div>
<table id="dpop" class="popup" border="0">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td>Подсказка<a href="#">Ссылка</a>
Еще какаято информация...</td>
<td class="right"></td>
</tr>
<tr>
<td id="bottomleft" class="corner"></td>
<td class="bottom"><img src="images/bubble-tail2.gif" alt="popup tail" width="30" height="29" /></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
 

Теперь придадим стиль нашей подсказки, для этого надо создать 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.bubbleInfo {
position: relative;
margin: 50px;
}
.trigger {
position: absolute;
}
/* Bubble pop-up */
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
}
.popup td.corner {
height: 15px;
width: 19px;
}
.popup td#topleft { background-image: url(images/bubble-1.gif); }
.popup td.top { background-image: url(images/bubble-2.gif); }
.popup td#topright { background-image: url(images/bubble-3.gif); }
.popup td.left { background-image: url(images/bubble-4.gif); }
.popup td.right { background-image: url(images/bubble-5.gif); }
.popup td#bottomleft { background-image: url(images/bubble-6.gif); }
.popup td.bottom { background-image: url(images/bubble-7.gif); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(images/bubble-8.gif); }
.popup table.popup-contents {
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}
table.popup-contents th {
text-align: right;
 
}
 
table.popup-contents td {
text-align: left;
}
tr#download th {
text-align: left;
text-indent: -9999px;
background: url(images/starburst.gif) no-repeat top right;
height: 17px;
}
 
tr#download td a {
color: #333;
}
 

Осталось прописать Javascript между тегами <head> который и отвечает за красивое появление подсказок

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
44
45
46
47
48
49
50
51
52
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -90,
left: -33,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//-->
</script>
 

Всё!  k_sishod



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...