• Страница 1 из 1
  • 1
Плавающий фиксированный мини-профиль 1.0 by Apocalypse
skula Дата: Понедельник, 06.06.2011, 22:21 | Сообщение # 1


Весь день прошёл в переездах... Куча работы и суеты, однако, со мной в дороге был ноутбук и я в свободное время накидал тело этого интересного скрипта, который, наверняка, придётся по душе многим из вас. На создание и тестирование скрипта ушло чуть больше пяти часов, но оно того стоило. Юзайте на здоровье

Особенности:
1) Кроссбраузерность (IE 6 и ниже браузерами прошу не называть)
2) Простота установки
3) Уникальный неповторимый дизайн
4) Открытый код, что позволяет легко редактировать все параметры скрипта

Установка:

В любой глобальный блок (Желательно в верхнюю часть сайта) в самый верх вставляйте:
Code
<style>  
  body {margin:0;padding:0;}  
  .apoPr {opacity:0;position:fixed;top:-85px;left:10px;width:50px;height:90px;z-index:50;background:#ccc;border:5px solid #ddd;border-radius:0 0 5px 5px;box-shadow:1px 1px 4px #aaa;}  
  .apoImg {padding:33px 0 0 5px;}  
  .apoMain {padding-left:80px;margin-top:-15px;position:fixed;top:50px;z-index:55;}  
  .apoMain2 {padding-left:80px;margin-top:-25px;position:fixed;top:120px;z-index:55;}  
  #apoII {opacity:0.5;}  
  #apoLink {text-align:center;padding:3px 0 0 3px;color:#888;border:2px solid #ddd;background:#eee;width:200px;height:20px;border-radius:0 0 5px 5px;box-shadow: 1px 1px 5px #ddd;margin-bottom:10px;font-weight:bold;cursor:pointer;}  
  #apoLink:hover {background:#ddd;}  
  span .queryField {width:200px;}  
  span .searchSbmFl {display:none;}  
  .apoClbtn {font-weight:bold;padding:80px 0 0 8px;position:fixed;top:-40;height:20px;width:15px;z-index:10;left:350px;background:#ccc;border:5px solid #ddd;border-radius:0 0 5px 5px;box-shadow:1px 1px 4px #aaa;}  
  .apoCloser {cursor:pointer;}  
</style>  

<a onclick="aClose();" href="javascript://"><div class="apoClbtn">x</div></a>  

<div class="apoMain">  
<a title="Перейти на главную" href="/"><img id="apoII" src="/images/apoPr/Home.png" width="40px" border="0" /></a>  
  <?if($LOGIN_LINK$)?><a target="_blank" title="Вход на сайт" href="$LOGIN_LINK$"><img id="apoII" src="/images/apoPr/Key.png" width="40px" border="0" /></a><?else?><a title="В профиль" href="$LOGIN_LINK$"><img id="apoII" src="/images/apoPr/Hand.png" width="40px" border="0" /></a><?endif?>  
<a target="_blank" title="К списку пользователей" href="/index/15-1"><img id="apoII" src="/images/apoPr/Users.png" width="40px" border="0" /></a>  
<a title="Открыть панель инструментов" href="javascript://"><img id="apoII" class="apoTool" src="/images/apoPr/Tools.png" width="40px" border="0" /></a>  
  <?if($LOGIN_LINK$)?><a title="Регистрация" href="$REGISTER_LINK$"><img id="apoII" src="/images/apoPr/Save.png" width="40px" border="0" /></a><?else?><a title="Выход из профиля" href="$LOGOUT_LINK$"><img id="apoII" src="/images/apoPr/Standby.png" width="40px" border="0" /></a><?endif?>  
</div>  

<div class="apoMain2">  
  <?if($LOGIN_FORM$)?><div id="apoLink">Для гостей недоступно</div><?else?><div id="apoLink" onclick="location.href='/news/0-0-0-0-1'">Добавить Новость</div><?endif?>  
  <?if($LOGIN_FORM$)?><div id="apoLink">Для гостей недоступно</div><?else?><div id="apoLink" onclick="location.href='/load/0-0-0-0-1'">Добавить Файл</div><?endif?>  
  <?if($LOGIN_FORM$)?><div id="apoLink">Для гостей недоступно</div><?else?><div id="apoLink" onclick="location.href='/photo/0-0-0-1'">Добавить Фото</div><?endif?>  
<span>$SEARCH_FORM$</span>  
</div>  

<div class="apoPr">  
<div class="apoImg">  
<img title="Ваш аватар" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/images/apoPr/noavatar.png<?endif?>" width="40" height="40" />  
</div>  
</div>  

<script>  
var apoMain = $('.apoMain');  
var apoMain2 = $('.apoMain2');  
var apoII = $('img#apoII');  
var apoPr = $('.apoPr');  
var apoC = $('.apoClbtn');  

  $('.apoClbtn').fadeTo(0, 0.95);  

  function aClose() {  
  $('.apoClbtn').toggle(function() {  
  apoMain.fadeTo(500, 0);  
  apoPr.fadeTo(500, 0);  
  apoC.fadeTo(500, 0.5);  
}, function() {  
  apoMain.fadeTo(500, 0.95);  
  apoPr.fadeTo(500, 0.95);  
  apoC.fadeTo(500, 0.95);  
});  
}  

  apoMain.fadeTo(0, 0);  
  apoMain2.fadeTo(0, 0);  

  $('.apoPr').animate({  
   opacity: '0.95',  
   top: '+=80px'  
},1000, function() {  
   $(this).animate({  
   width: '+=250px'  
   }, 1000, function() {  
   apoMain.fadeTo(500, 0.95);  
   });  
   });  
     
  apoII.mouseover(function() {  
   $(this).stop().fadeTo(500, 1);  
   });  
   apoII.mouseout(function() {  
   $(this).stop().fadeTo(500, 0.5);  
   });  
     
  $('.apoTool').toggle(function() {  
   $('.apoPr').animate({  
   height: '+=150px'  
   }, function() {  
   apoMain2.fadeTo(500, 0.95);  
   });  
   }, function() {  
   apoMain2.fadeTo(500, 0, function() {  
   $('.apoPr').animate({  
   height: '-=150px'  
   });  
   });  
   });  
</script>


В файловом менеджере в папке images создайте папку apoPr (Если у вас нет папки images - создайте её) и залейте в неё всё содержимое архива

Материал подготовлен Apocalypse
Скачать
  • Страница 1 из 1
  • 1
Поиск:

Лучшие пользователи
Пользователь Сообщений Группа
QuSpell 473 Проверенные
ppsha 446 Проверенные
skula 103 Проверенные
WinZeos 78 Проверенные
realhacking 59 Пользователи
Sezy 38 Проверенные
WinneR 35 Проверенные
GuideLess 19 Проверенные
JaYFuNk 19 Пользователи
ZUKO 11 Пользователи

Copyright © Форум поддержки по системе uCoz
Бесплатная адаптация шаблонов с CMS под uCoz
Бесплатные скрипты для uCoz
Бесплатные, готовые шаблоны от WinZeos
Уроки рисования и вёрстки макетов
Хостинг от uCoz