Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Пользователи
- Всплывающия информация о пользователе.
+
Всем привет многие видели на FACEBOOK при наведении на аватар пользователя выводиться инфа о нем, ну так вот суть тут таже!.
Установка:
1. Добавим HTML:
#uPeople-hover - В нем располагайте свои ссылки где хотите видеть чтоб показывалась информация о Юзере (ONLINE_USERS_LIST, Информеры и прочее...)!.
2. Добавим на персональную страницу в самый низ или как вам душе угодно:
/avatar/no_avatar.jpg - Заменить на свою ссылку Но аватара.
3. Добавим js скрипт:
4. Добавим CSS стили:
Установка:
1. Добавим HTML:
Код
<div id="uPeople-load"></div>
<div id="uPeople-hover">Тут оборачиваем ссылки которые выводятся</div>
<div id="uPeople-hover">Тут оборачиваем ссылки которые выводятся</div>
#uPeople-hover - В нем располагайте свои ссылки где хотите видеть чтоб показывалась информация о Юзере (ONLINE_USERS_LIST, Информеры и прочее...)!.
2. Добавим на персональную страницу в самый низ или как вам душе угодно:
Код
<div id="uPeople" style="display:none;">
<div id="uPeople-fon"><div id="uPeople-back"></div><div id="uPeople-fon-me">$_USERNAME$</div></div>
<div id="uPeople-avatar"><img src="<?if( $_AVATAR$)?><?substr(substr($_AVATAR$,strpos($_AVATAR$,'src="')+5),0,strpos(substr($_AVATAR$,strpos($_AVATAR$,'src="')+5),'"'))?><?else?>/avatar/no_avatar.jpg<?endif?>"></div>
<div id="uPeople-dann">$_GROUP_ICON$ Группа: $_GROUP_NAME$ <br> Поощрения: Награды <b>$AWARDS$</b> | Репутация <b>$_REPUTATION$</b></div>
</div>
<div id="uPeople-fon"><div id="uPeople-back"></div><div id="uPeople-fon-me">$_USERNAME$</div></div>
<div id="uPeople-avatar"><img src="<?if( $_AVATAR$)?><?substr(substr($_AVATAR$,strpos($_AVATAR$,'src="')+5),0,strpos(substr($_AVATAR$,strpos($_AVATAR$,'src="')+5),'"'))?><?else?>/avatar/no_avatar.jpg<?endif?>"></div>
<div id="uPeople-dann">$_GROUP_ICON$ Группа: $_GROUP_NAME$ <br> Поощрения: Награды <b>$AWARDS$</b> | Репутация <b>$_REPUTATION$</b></div>
</div>
/avatar/no_avatar.jpg - Заменить на свою ссылку Но аватара.
3. Добавим js скрипт:
Код
$(function(){
$('div#uPeople-hover a').hover(function() {
var uPeople = $(this).html();
$('#uPeople-load').load('/index/8-0-'+uPeople+' #uPeople');
setTimeout(function() { $('div#uPeople').show(); }, 500);
$('#uPeople-load').hide();
$(this).append( $("#uPeople").before());
}, function() {
$('div#uPeople').hide();
$(this).find("#uPeople:last").remove();
});
return false
});
$('div#uPeople-hover a').hover(function() {
var uPeople = $(this).html();
$('#uPeople-load').load('/index/8-0-'+uPeople+' #uPeople');
setTimeout(function() { $('div#uPeople').show(); }, 500);
$('#uPeople-load').hide();
$(this).append( $("#uPeople").before());
}, function() {
$('div#uPeople').hide();
$(this).find("#uPeople:last").remove();
});
return false
});
4. Добавим CSS стили:
Код
#uPeople-back {
background: url(http://ucodes.ru/public/img/bfon.png) repeat-x left top;
bottom: 70px;
height: 93px;
position: absolute;
width: 100%;
}
div#uPeople-fon-me {
position: absolute;
margin: 105px 0px 0px 145px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
color: #fff;
font-size: 17px;text-shodow:0px 0px 1px #000;
}
div#uPeople-dann {
position: absolute;
margin: -66px 0px 0px 140px;
color: #444;
font-family: helvetica, arial, sans-serif;
line-height: 30px;
}
div#uPeople-hover a #uPeople {
margin-left: -356px;
display: inline-block !important;
}
div#uPeople {
border: 0;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
width: 370px;
position: absolute;
z-index: 999;border-radius:3px;margin-top:-220px;
background: #fff;
}
div#uPeople:after {
top: 100%;
left: 90%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: rgba(0, 0, 0, .7);
border-width: 10px;
margin-left: -10px;
}
div#uPeople-fon {
width: 370px;
height: 137px;
background: url(http://ucodes.ru/public/img/bfon2.jpg) no-repeat;
background-size: cover;
}
div#uPeople-avatar {
position: relative;
margin: -48px 0px 10px 20px;
}
div#uPeople-avatar img {
width: 100px;
height: 100px;
padding: 3px;box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
}
background: url(http://ucodes.ru/public/img/bfon.png) repeat-x left top;
bottom: 70px;
height: 93px;
position: absolute;
width: 100%;
}
div#uPeople-fon-me {
position: absolute;
margin: 105px 0px 0px 145px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
color: #fff;
font-size: 17px;text-shodow:0px 0px 1px #000;
}
div#uPeople-dann {
position: absolute;
margin: -66px 0px 0px 140px;
color: #444;
font-family: helvetica, arial, sans-serif;
line-height: 30px;
}
div#uPeople-hover a #uPeople {
margin-left: -356px;
display: inline-block !important;
}
div#uPeople {
border: 0;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .35);
width: 370px;
position: absolute;
z-index: 999;border-radius:3px;margin-top:-220px;
background: #fff;
}
div#uPeople:after {
top: 100%;
left: 90%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: rgba(0, 0, 0, .7);
border-width: 10px;
margin-left: -10px;
}
div#uPeople-fon {
width: 370px;
height: 137px;
background: url(http://ucodes.ru/public/img/bfon2.jpg) no-repeat;
background-size: cover;
}
div#uPeople-avatar {
position: relative;
margin: -48px 0px 10px 20px;
}
div#uPeople-avatar img {
width: 100px;
height: 100px;
padding: 3px;box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
}
При копировании материала указываем источник uCodes.ru
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 03.01.2016 в 00:16 по МСК
Категория: Пользователи
Просмотров: 1027
Комментариев: 1
Эмоций:
Дата добавления: 03.01.2016 в 00:16 по МСК
Категория: Пользователи
Просмотров: 1027
Комментариев: 1
Эмоций:
Теги:
| |