ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ ВНУТРИ КАРТИНКИ ПРИ НАВЕДЕНИИ НА JQUERY - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Войти
Регистрация
Посетители за сегодня
Обратная связь
Опрос
Правила чата
Пользователи онлайн
−Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории
Комментарии
༒AДМИНИСТРАТОР༒
21-Декабря-2021
noНе выводит сообщения в чат.
Ответить
Vitalya
18-Апреля-2021
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Ответить
igor_ponyshkov
10-Апреля-2021
noЭТО МЕНЮ НЕ РАБОТАЕТ https://wampi.ru/image/RnPeLYV
Ответить
Milan_Shubin
01-Июля-2018
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
Ответить
Vitalya
01-Июля-2018
Приносим свои извинения, всё исправим...
Ответить
KaMoRkA.uCoz.com -- uCoz -- Скрипты
ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ ВНУТРИ КАРТИНКИ ПРИ НАВЕДЕНИИ НА JQUERY
Хорошо оформленные и шустро работающие подсказки внутри изображений, которые всплывают при наведении курсора

Установка:
 
1 В самый низ вашего CSS вставляйте:
Code
.photo { 
position:relative; 
font-family:arial;
overflow:hidden; 
border:5px solid #000; 
width:350px; 
height:233px; 
}
.photo .heading, .photo .caption { 
position:absolute; 
background:#000; 
height:50px; 
width:350px; 
opacity:0.6; 
} 
.photo .heading {
top:-50px; 
} 
.photo .caption {
bottom:-50px;
left:0px; 
} 
.photo .heading span { 
color:#26c3e5;
top:-50px; 
font-weight:bold; 
display:block; 
font-size:15px; 
padding:5px 0 0 10px; 
} 
.photo .caption span{ 
color:#999;
font-size:11px; 
display:block; 
padding:5px 10px 0 10px; 
}

2 После ‹/head› на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> 
<script> 
$(document).ready(function () { 
// transition effect 
style = 'easeOutQuart'; 
 
// if the mouse hover the image 
$('.photo').hover( 
function() { 
//display heading and caption 
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style}); 
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style}); 
}, 
 
function() { 
//hide heading and caption 
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style}); 
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style}); 
} 
); 
}); 
</script>

3 Картинки с подсказками оформляются следующим образом:
Code
<div class="photo"> 
<div class="heading"><span>Название картинки</span></div> 
<img src="Ссылка на картинку"> 
<div class="caption"><span>Здесь любое ваше описание</span></div> 
</div>

Скрипт из прикреплённого архива залейте в папку js

Важно!

При копировании материала указывать ссылку на источник.

- 452
- 21-Октября-2016
- 1
- 0
Материал разместил:

Скачать
Похожий материал
Похожего материала не найдено...
Статьи сайта
12-Ноября-2017 в 23:41:03
Рай для верстальщика: синхронизация окон браузеров
29-Июня-2017 в 12:30:13
Что такое информер и зачем нужен на сайте
29-Июня-2017 в 10:21:53
Ограничить длину заголовка и описание к материалу для uCoz
05-Марта-2017 в 12:54:01
Сокращаем "Описание" в вид материалов
01-Марта-2017 в 17:08:05
Не форматируется флешка? Решение есть