Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Свои подсказки
DEMO
+
Всем привет, сегодня мы научимся делать свои всплывающие подсказки, скрипт очень простой и легко настраивается. но меньше слов больше дела перейдем к установке и настройке:
Установка:
1. Пропишем data в наших div и прочих элементах (Можно сменить на любой свой тег не кретично).
2. Добавим сам скрипт:
div, a, span - Элементы для которых преобразовывается и выводятся наша инфа.
3. Добавим CSS вид нашего окна:
Установка:
1. Пропишем data в наших div и прочих элементах (Можно сменить на любой свой тег не кретично).
Код
<div data="<img src='http://cs11130.vk.me/u36206498/127629584/x_d90fe64a.jpg'> <br><center>
Cтудия графики и дизайна Best Studio, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей!">Наведи на меня</div></center></div>
Cтудия графики и дизайна Best Studio, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей!">Наведи на меня</div></center></div>
2. Добавим сам скрипт:
Код
<script>$(function(){
$('div, a, span').hover(function(){
var myhit = $(this).attr('data');
$(this).append('<div class="myHit">'+myhit+'</div>');
}, function() {
$('.myHit').remove();
});
}); </script>
$('div, a, span').hover(function(){
var myhit = $(this).attr('data');
$(this).append('<div class="myHit">'+myhit+'</div>');
}, function() {
$('.myHit').remove();
});
}); </script>
div, a, span - Элементы для которых преобразовывается и выводятся наша инфа.
3. Добавим CSS вид нашего окна:
Код
.myHit {
position: absolute;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;max-width:250px;
box-shadow: 0pc 0pc 10px #ccc;
}
.myHit img {max-width:100%;}
position: absolute;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;max-width:250px;
box-shadow: 0pc 0pc 10px #ccc;
}
.myHit img {max-width:100%;}
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 23.06.2016 в 18:22 по МСК
Категория: Другие модули
Просмотров: 710
Комментариев: 0
Эмоций:
Дата добавления: 23.06.2016 в 18:22 по МСК
Категория: Другие модули
Просмотров: 710
Комментариев: 0
Эмоций:
Теги: